在项目列表中标记复选框的问题

Question

我有一个 Vue 应用程序：它是待办事项列表，通过单击“添加任务”按钮添加一些注释后，我们会收到待办事项列表。在每个项目的前面，我们都有删除按钮和复选框，以便有机会将其标记为已完成。该错误是当我例如将列表中的一个项目标记为已选中，然后删除它 - 已选中的标记转到另一个最初未标记为已选中的项目。您能否建议如何使用 Vue.js 或任何其他选项来解决它？下面是我的代码：

Vue.createApp({
    data(){
        return{
          placeholder: 'Start typing',
          inputvalue: '',
          notes: []
        }
    },
    mounted() {
        this.notes = JSON.parse(localStorage.getItem('note')) || [];
      },
      watch: {
            notes: {
                handler: function() {
                    localStorage.setItem('note', JSON.stringify(this.notes));
                },
                deep: true
            }
        },
    methods: {
        addnewtask(){
            if (this.inputvalue !== ''){
                this.notes.push(this.inputvalue)
                this.inputvalue=''
            }
        },
        removetask(index){
            if (confirm('Do you really want to delete?'))
            this.notes.splice(index, 1)
        }
    }
}).mount(app)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container" id="app">
      <div class="card">
          <h1>To Do List</h1>
          <div class="form-control">
             <input
                 type="text" 
                 v-bind:placeholder="placeholder" 
                 v-model="inputvalue"
                 v-on:keypress.enter="addnewtask"
              />
              <button class="btn" v-on:click="addnewtask">Add Task</button>
            </div>
            <hr />
            <ul class="list" v-if="notes.length !== 0"...>
                <li class="list-item" v-for="(note, index) in notes">
                    <div>
                        <input type="checkbox"/>
                        ({{index+1}}) {{note}}
                    </div>
                    <button class="btn danger" v-on:click="removetask(index)">Delete</button>
                </li>
                <hr />
                <li>
                    <strong>Total: {{notes.length}}</strong>
                </li>
            </ul>
            <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
</body>
</html>

Answer 1

你代码中的主要问题是，你没有存储任何关于检查了哪个任务以及哪个任务的信息 not.let 说你检查了第 3 个任务然后删除它，新的第 3 个项目来自顶部的将被自动检查，因为它没有关于任务的信息，因此无法区分新任务和已删除任务。

这可以通过多种方式解决，一个简单的解决方案是，在您的 notes 数组中存储两种类型的数据。一个 title 和一个 isChecked 然后 v-model 模板中的检查值。

像这样更新您的 addnewtask() 函数，

    addnewtask() {
      if (this.inputvalue !== "") {
        this.notes.push({
          title: this.inputvalue,
          isChecked: false,
        });
        this.inputvalue = "";
      }
    },

在 html 中使用 v-modal 为 note.isChecked 添加双向数据绑定并像 note.title 一样更新 note 因为注释当前是现在对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List</title>
  </head>
  <link rel="stylesheet" href="style.css" />
  <body>
    <div class="container" id="app">
      <div class="card">
        <h1>To Do List</h1>
        <div class="form-control">
          <input
            type="text"
            v-bind:placeholder="placeholder"
            v-model="inputvalue"
            v-on:keypress.enter="addnewtask"
          />
          <button class="btn" v-on:click="addnewtask">Add Task</button>
        </div>
        <hr />
        <ul class="list" v-if="notes.length !== 0" ...>
          <li class="list-item" v-for="(note, index) in notes">
            <div>
              <input type="checkbox" v-model="note.isChecked" />
              ({{index+1}}) {{note.title}}
            </div>
            <button class="btn danger" v-on:click="removetask(index)">
              Delete
            </button>
          </li>
          <hr />
          <li>
            <strong>Total: {{notes.length}}</strong>
          </li>
        </ul>
        <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
  </body>
</html>

这是您的代码演示的 vue 游乐场 link。

在项目列表中标记复选框的问题

Issue with marking of checkboxes in the list of items

checkbox

items

list

vue.js