Как я могу подключиться к отфильтрованным элементам с помощью Vue JS?

Question

Создание приложения списка задач с помощью Vue js

Поведение:

1. задача ввода
2. Add task -> показывает задачу в списке
3. создайте некоторые элементы, выполнив указанные выше 2 шага
4. установите флажок для некоторых из этих элементов
5. щелкните Ongoing или done

---- теперь возникает проблема ---

Когда у вас есть отфильтрованные элементы, нажатие Remove task или изменение состояния done в localStorage путем установки флажка выполняются для неправильных элементов.

Я знаю, что это из-за index области ниже

Есть ли способ подключиться к массиву todos и свойству объекта localStorage по id номеру?

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

Поскольку todo items - это одни и те же объекты в исходном и отфильтрованном списках, вам следует передать сам элемент в 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));
    }