Mongodb 如何在单击“检查”按钮时更改vue的状态

我正在使用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>

{{todo.title}
{{todo.title}
导出默认值{
数据（）{
返回{
待办事项：{}
}
},
创建（）{
这是.$http.get（'/api/todos'））
。然后（（响应）=>{
this.todos=response.data
})
},
方法：{
全地形图（todo）{
todo.done=！todo.done
}
}
}
您不需要
v-on:click=“completeTodo（todo）”
v-model
已经为您提供了解决方案。此外，代码中的
todos
应该定义并实例化为数组，而不是对象

v-model
用于双向数据绑定。这意味着，在这种情况下，您从代码传递的任何数据都将绑定到复选框值，并且每当用户从UI进行更改并且复选框的值被用户更改时，都将在v-model变量中捕获。v-model是：value-prop和@change-event（如果是checkbox）的组合，因此，它能够以两种方式更新数据

请参考这个片段


var-app=新的Vue({
el:“#应用程序”，
数据：{
待办事项：[
{
id:1，
标题:"研究",，
完成：错误
},
{
id:2，
标题:"工作",，
完成：错误
},
{
id:3，
标题:"戏",，
完成：错误
}
]
}
})

{{todo.title}
{{todo.title}
当您提取数据时，
todo
模型的
属性是否已完成
啊！我已经改正了我的错误。谢谢你的回答。：）我真正想做的是，即使检查了，也要更新检查过的帖子，但我决定现在就对状态感到满意。如果你对此有好的意见，请毫不犹豫地告诉我们！