Question

我试图触发更改事件，每次我选中“复选框”时，都会将某些语句从true设置为false，反之亦然。

实际上是从这个tutorial开始，我尝试通过添加此更改事件来进行实验。

<div v-for="task in tasks" :key="task.id" v-if="task.completed">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete">
  </ul>
</div>




var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete() {
          this.task.completed = !this.task.completed;
          }
      }
  })

现在我希望每当我为某项任务选中复选框时，完成的值都会更改，但是更改事件不会触发，并且完成的值保持不变。

Answer 1

您需要在回调中引用要完成的任务：

@change="changeComplete(task)"

然后：

changeComplete(task) {
    task.completed = !task.completed;
}

您的v-if显示了已完成的任务，我想您想显示未完成的任务：

v-if="task.completed == false"

这是一份工作副本：

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
  el: '#root',
  template: '<div> \
    <div v-for="task in tasks" :key="task.id" v-if="task.completed == false"> \
      <ul> \
        <li> \
          <span v-text="task.description"></span> \
          <input type="checkbox" @change="changeComplete(task)"> \
        </li> \
      </ul> \
    </div></div>',
  
  data: {
    tasks: [{
        description: 'clean room',
        completed: false,
        id: 1
      },
      {
        description: 'do homework',
        completed: false,
        id: 2
      },
      {
        description: 'go to sleep',
        completed: false,
        id: 3
      }
    ]
  },
  methods: {
    changeComplete(task) {
      task.completed = !task.completed;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

Answer 2

此处的task对象中没有data属性，因此您需要在tasks数组中进行更改，并且为此您需要传递索引以标识需要更改的任务。

var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
          }
      }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="root">
<div>
<div v-for="task,index in tasks" :key="task.id" v-if="task.completed">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete(index)">
  </ul>
</div>
</div>
</div>

或者更好的是，您可以只更改班级以还原或切换任务状态

var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
          }
      }
  })

.completed{
  color: green;
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="root">
<div>
<div :class='{completed:task.completed}' v-for="task,index in tasks" :key="task.id">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete(index)">
  </ul>
</div>
</div>
</div>

Vue.js方法更改事件不会触发

2 个答案: