Как изменить состояние vue при нажатии кнопки проверки

Question

Я создаю приложение Todo с использованием Vue.js, Express.js и MongoDB.

Я хочу изменить состояние полей, которые отображаются как 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 используется для двухстороннего связывания данных. Это означает, что любые данные, которые вы передаете из своего кода, будут привязаны к значению флажка в этом случае, и всякий раз, когда из пользовательского интерфейса вносятся изменения и значение флажка изменяется пользователем, они будут записываться в переменную v-модели. 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>