Javascript 如何使用Vue JS连接到筛选的项目？

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

行为：

输入任务

添加任务

->在列表中显示任务

通过以上两个步骤制作一些物品

选中其中一些项目

单击

进行中

或

完成

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

筛选项目后，单击

删除任务

，或通过选中复选框更改本地存储中的

完成

状态，以执行错误的项目

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

索引

是否有任何方法可以通过
id
number连接到
todos
array和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));
}


newvue({
el:“#应用程序”，
数据：{
请问：''，
已筛选：“”，
id:1，
完成：错误，
关键字名称：'myTodoList'，
待办事项：[]
},
创建（）{
让keyObject=JSON.parse（localStorage.getItem（this.keyName））
if（键对象）{
this.todos=keyObject；
}否则{
返回
}
//设置重新加载时的id号
如果（this.todos.length>0）{
const setId=this.todos.reduce（函数（a，b）{返回a>b.id？a:b.id}，0）
this.id=setId+1
this.filtered='all'
}
},
方法：{
过滤（已过滤）{
this.filtered=filtered
},
addTask（）{
if（this.inputAsk===''）{
返回
}
const todo={id:this.id，task:this.inputTask，done:false}
this.todos.push（todo）
setItem（this.keyName，JSON.stringify（this.todos））；
this.inputAsk=''
this.filtered='all'
这是我的身份证++
},
removeAll（）{
this.todos=[]；
localStorage.clear（）；
},
移除任务（索引）{
让keyObject=JSON.parse（localStorage.getItem（this.keyName））
这个.todos.splice（索引，1）；
if（键对象）{
删除键对象[索引]；
setItem（this.keyName，JSON.stringify（this.todos））；
}
},
状态（索引）{
this.todos[index].done=！this.todos[index].done
setItem（this.keyName，JSON.stringify（this.todos））；
}
},
计算：{
filteredTodos（）{
返回此.todos.filter（todo=>{
如果（this.filtered===‘正在进行’）{
返回！todo.done；
}else if（this.filtered===“完成”）{
返回todo.done；
}否则{
返回true；
}
});
},
},
})
.active{背景：绿松石；}

待办事项
添加任务
全部的
不间断的
多恩
全部删除
{{filteredTodos.length}}剩余任务/{{todos.length}所有任务



{{todo.task}}
删除任务


全部完成
因为待办事项在原始列表和筛选列表中都是相同的对象，所以您应该将项目本身传递到状态并移除任务，而不是其索引

模板：

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

精彩的。不需要连接到
这个。todos
数组一直是我从你的代码中学到的。这对我来说很重要。你是对的
deleteKeyObject[index]是没有必要的。非常感谢你。这很有帮助。
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));
    }