时间戳

首页 > 解决方案 > 单击检查按钮时如何更改vue的状态

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>

标签： mongodbexpressvue.js

解决方案

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

v-model用于双向数据绑定。这意味着，在这种情况下，您从代码传递的任何数据都将绑定到复选框值，并且无论何时从 UI 进行更改并且用户更改了复选框的值，都会在 v-model 变量中捕获。v-model 在复选框的情况下是 :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>

推荐阅读