Question

我正在使用Vue.js，Express.js和MongoDB创建Todo应用程序。

我想通过复选框更改显示为v-for的字段的状态。

我想要的代码是在选中复选框时更改文本的状态，并使用v-if显示另一个元素。

这是我写的代码：但这不起作用。

如果我输入的代码错误，请帮助我。

列表组件

<template>
  <div class="todos">
    <div v-for="todo in todos" v-bind:key="todo._id" class="todo">
        <div>
          <input type="checkbox" v-model="todo.done" v-on:click="completeTodo(todo)">
          <del v-if="todo.done">{{todo.title}}</del>
          <strong v-else>{{todo.title}}</strong>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      todos: {}
    }
  },
  created () {
    this.$http.get('/api/todos')
    .then((response) => {
      this.todos= response.data
    })
  },
  methods: {
    completeTodo (todo) {
      todo.done = !todo.done
    }
  }
}
</script>

Answer 1

您不需要v-on:click="completeTodo(todo)"。 v-model已经在为您解决问题。另外，应将代码中的todos定义并实例化为数组而不是对象。

v-model用于双向数据绑定。这意味着，在这种情况下，您从代码传递的任何数据都将绑定到复选框值，并且每当对UI进行更改并且用户更改复选框的值时，都将在v-model变量中捕获该值。 v模型是：value prop和@change事件的组合，如果出现复选框，则可以通过两种方式更新数据。

请参考此代码段。

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {
        id: 1,
        title: 'Study',
        done: false
      },
      {
        id: 2,
        title: 'Work',
        done: false
      },
      {
        id: 3,
        title: 'Play',
        done: false
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"> 
  <div class="todos">
    <div v-for="todo in todos" :key="todo.id">
        <div>
          <input type="checkbox" v-model="todo.done"/>
          <del v-if="todo.done">{{todo.title}}</del>
          <strong v-else>{{todo.title}}</strong>
        </div>
    </div>
  </div>
</div>

单击检查按钮时如何更改Vue的状态

1 个答案: