当前位置：首页 > news >正文

vue3动态绑定并通过按钮绑定事件 | 解决报错error ‘xxx‘ is not defined no-undef

news 来源：原创 2025/5/9 4:58:37

以下代码报错：

<template>
    <div :class="inputBox">
      <input type="text" v-model="inputText" placeholder="填写任务" >
      {{ inputText }}
      <button @click="addTask">加任务</button>
    </div>
</template>

<script>
export default{
  methods:{
    addTask(){
      this.taskList.push({
        task:inputText,
        isCompleted:false,
      });
      inputText='';
    }
  },
  data(){
    return{
      inputText: ''
    }
  }
}
</script>

以上代码段，导致了报错：error ‘inputText’ is not defined no-undef

报错原因：

data方法作用域内的变量取值方式错误，应该改为这种方式：this.$data.inputText
当然也有其它方法：此处不赘述，可参考其它博文Vue3.0基础教程：data属性、计算属性、侦听器、Class与style绑定

优化后代码段：

<template>
  <div>
    <div :class="inputBox">
      <input type="text" v-model="inputText" placeholder="填写任务" >
      {{ inputText }}
      <button @click="addTask">加任务</button>
    </div>
  </div>
</template>

<script>
export default{
  methods:{
    addTask(){
      this.taskList.push({
        task:this.$data.inputText,  // 优化处
        isCompleted:false,
      });
      this.$data.inputText='';    // 优化处
    }
  },
  data(){
    return{
      inputText: '',
    }
  }
}
</script>