如何使用 Vue JS 连接到过滤的项目？

Question

使用 Vue js 制作待办事项列表应用

行为：

1. 输入任务
2. Add task -> 在列表中显示任务
3. 通过以上 2 个步骤制作一些物品
4. 选中其中一些项目的复选框
5. 点击Ongoing或done

----现在问题发生了---

当您过滤项目时，单击Remove task 或通过选中复选框更改localStorage 中的done 状态将执行到错误的项目。

我知道这是因为下面区域的index

有没有办法通过id 数字连接到todos 数组和localStorage 对象属性？

removeTask(index) {
  let keyObject =JSON.parse(localStorage.getItem(this.keyName))
  this.todos.splice(index,1);
  if (keyObject) {
    delete keyObject[index];
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
  }
},

status(index) {
  this.todos[index].done = !this.todos[index].done
  localStorage.setItem(this.keyName, JSON.stringify(this.todos));
}

new Vue({
  el: '#app',
  data: {
    inputTask: '',
    filtered:'',
    id: 1,
    done:false,
    keyName:'myTodoList',
    todos: []
  },

  created() {
    let keyObject =JSON.parse(localStorage.getItem(this.keyName))
    if (keyObject) {
      this.todos = keyObject;
    } else {
      return
    }

    //set id number for when reloaded
    if (this.todos.length > 0) {
      const setId = this.todos.reduce(function(a,b){ return a > b.id ? a : b.id} ,0)
      this.id = setId + 1
      this.filtered = 'all'
    }

  },

  methods: {
    filtering(filtered) {
      this.filtered = filtered
    },

    addTask() {
      if (this.inputTask==='') {
        return
      }

      const todo = {id: this.id, task:this.inputTask, done:false}
      this.todos.push(todo)
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      this.inputTask=''
      this.filtered = 'all'
      this.id++

    },

    removeAll() {
      this.todos = [];
      localStorage.clear();
    },

    removeTask(index) {
      let keyObject =JSON.parse(localStorage.getItem(this.keyName))
      this.todos.splice(index,1);
      if (keyObject) {
        delete keyObject[index];
          localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      }
    },

    status(index) {
      this.todos[index].done = !this.todos[index].done
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
    }

  },

  computed: {

    filteredTodos() {
      return this.todos.filter(todo => {
        if (this.filtered === 'ongoing') {
          return !todo.done;
        } else if (this.filtered === 'done') {
          return todo.done;
        } else {
          return true;
        }

      });
    },


  },

})

.active {background: turquoise;}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h1>TODO</h1>
  <input type="text" v-model="inputTask" placeholder="Enter your task">
  <button @click="addTask">Add task</button>
  <div>
    <button :class="{active: filtered ==='all'}" @click="filtering('all')">All</button>
    <button :class="{active: filtered ==='ongoing'}" @click="filtering('ongoing')">Ongoing</button>
    <button :class="{active: filtered ==='done'}" @click="filtering('done')">Done</button>
    <button @click="removeAll">Remove all</button>
  </div>
  <p>{{filteredTodos.length}} tasks left /  {{todos.length}} tasks of all</p>
  <ul>
    <li v-for="(todo, index) in filteredTodos" :class="{done:todo.done}" :key="todo.id">
      <input type="checkbox" v-model="todo.done" @click="status(index)">
      {{ todo.task }}
      <button @click="removeTask(index)">Remove task</button>
    </li>
  </ul>
  <p v-show="todos.length===0">All done</p>
</div>

Answer 1

因为 待办事项 是原始列表和过滤列表中的相同对象，所以您应该将项目本身传递给 status 和 removeTask 而不是它的索引。

模板：

<input type="checkbox" v-model="todo.done" @click="status(todo)">
...
<button @click="removeTask(todo)">Remove task</button>

代码：

removeTask(todo) {
      let keyObject =JSON.parse(localStorage.getItem(this.keyName))
      const index =  this.todos.indexOf(todo)
      this.todos.splice(index,1);
      if (keyObject) {
        // why are you removing this? You will overwrite the whole array in setItem below
        delete keyObject[index];
        localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      }
    },
status(todo) {
      todo.done =  !todo.done
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
    }