选中通过 v-model 绑定到 false 值的 Vue.js 复选框

Question

我正在尝试使用类似艾森豪威尔矩阵的待办事项列表，但我遇到了一个问题，因为 v-bind 和 v-model 是在 false 上触发的我该如何修复这个错误？代码的灵感来自Vue.js Todo App - Basics - Part 1 <div class="todoList" v-for="(task, index) in todo" :key="task.id">                    <div>                        <div v-if="task.type == 'notimportant'">                            <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" />                            <div class="task" v-bind:class="{ completed: task.completed }">                                {{ task.title }}                            </div>                            <button class="removeTask" @click="removeTask(index)">X</button>                        </div>                    </div>                </div>export default {    name: "app",    data() {        return {            newTodo: "",            type: "",            important: "",            id: 3,            todo: [                {                    id: 1,                    title: "Fist Task",                    completed: "false",                    editing: "false",                    type: "urgent",                },                {                    id: 2,                    title: "Second Task",                    completed: "false",                    editing: "false",                    type: "important",                },            ],        };    },

Answer 1

问题是你写的是被评估false为的字符串，你应该知道空字符串、值和被评估为，反之亦然"false"true''0nullundefinedfalse

在此处了解有关类型强制的更多信息

let app = new Vue({

  el: "#app",

  data() {

    return {

      newTodo: "",

      type: "",

      important: "",

      id: 3,

      todo: [{

          id: 1,

          title: "Fist Task",

          completed: false,

          editing: "false",

          type: "urgent",

        },

        {

          id: 2,

          title: "Second Task",

          completed: false,

          editing: "false",

          type: "important",

        },

      ],

    };

  },

  methods: {

    addTask() {

      if (this.newTodo.trim().length == 0) {

        return;

      }

      this.todo.push({

        id: this.id,

        title: this.newTodo,

        completed: "false",

        editing: "false",

        type: this.type,

      });

      this.id++;

      this.newTodo = "";

    },

    removeTask(index) {

      this.todo.splice(index, 1);

    },

    completeTask(task) {

      task.completed = event.target.checked;

    },

  },

  directives: {

    focus: {

      inserted: function(el) {

        el.focus();

      },

    },

  },

})

* {

  margin: 0px;

  box-sizing: border-box;

}

.removeTask {}

.completed {

  text-decoration: line-through;

}

.task {

  text-decoration: 0;

}

/*

.conteiner {

    display: flex;

} /*

.todoBox {

    width: 50%;

    height: 50vh;

    border: 1px solid black;

    text-align: center;

}

.todoList {

    width: 100%;

    height: 100%;

    border: 1px solid red;

}

*/

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

<div id="app">

  <div class="conteiner">

    <input placeholder="what we do ?" type="text" v-model="newTodo" />

    <button @click="addTask()">Add</button>

    <select v-model="type">

      <option disabled value="">Select</option>

      <option value="urgent">Urgent</option>

      <option value="noturgent">Not Urgent</option>

      <option value="important">Important</option>

      <option value="notimportant">Not Important</option>

    </select>

    <div class="todoBox">

      <h2>Urgent</h2>

      <div class="todoList" v-for="(task, index) in todo">

        <div>

          <div v-if="task.type == 'urgent'">

            <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" />

            <div class="task" v-bind:class="{ completed: task.completed }">

              {{ task.title }}

            </div>

            <button class="removeTask" @click="removeTask(index)">X</button>

          </div>

        </div>

      </div>

    </div>

    <div class="todoBox">

      <h2>Not Urgent</h2>

      <div class="todoList" v-for="(task, index) in todo" :key="task.id">

        <div>

          <div v-if="task.type == 'noturgent'">

            <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" />

            <div class="task" v-bind:class="{ completed: task.completed }">

              {{ task.title }}

            </div>

            <button class="removeTask" @click="removeTask(index)">X</button>

          </div>

        </div>

      </div>

    </div>

    <div class="todoBox">

      <h2>Important</h2>

      <div class="todoList" v-for="(task, index) in todo" :key="task.id">

        <div>

          <div v-if="task.type == 'important'">

            <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" />

            <div class="task" v-bind:class="{ completed: task.completed }">

              {{ task.title }}

            </div>

            <button class="removeTask" @click="removeTask(index)">X</button>

          </div>

        </div>

      </div>

    </div>

    <div class="todoBox">

      <h2>Not Important</h2>

      <div class="todoList" v-for="(task, index) in todo" :key="task.id">

        <div>

          <div v-if="task.type == 'notimportant'">

            <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" />

            <div class="task" v-bind:class="{ completed: task.completed }">

              {{ task.title }}

            </div>

            <button class="removeTask" @click="removeTask(index)">X</button>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>