vue.js - 删除商店 Vuex 中的项目
问题描述
我想删除位于我商店中的商品。我看到了这个解决方案https://stackoverflow.com/a/59686164/11984242这似乎是我正在寻找的但是我的对象中有另一个“级别”所以我不知道如何从子级。
我的数据结构。
{
id: 1,
name: 'My customer one',
projects: [
{
id: 1,
name: 'name',
tests: [
{
id: 1,
name: 'name test'
},
{
id: 2,
name: 'name test 2'
}
]
},
{
id: 2,
name: 'other name'
}
]
}
所以我看到了如何使用上面的链接删除项目。但是如何删除一行测试?
我在我的 vue 中这样做:
this.$store.commit("deleteTest", this.idProject, e)
这在我的商店里:
deleteTest(state, {data, e}) {
const allTestsOfProject = state.listProjects.projects.find(p => p.id === data)
console.log("all", allTestsOfProject)
const oneTest = allTestsOfProject.studies.find(q => q.id === e)
console.log("one test", oneTest)
//state.listProjects.projects.splice(oneTest, 1)
}
非常感谢您的帮助
解决方案
您的代码有两个问题:
第一个问题
commit
函数只需要 2 个参数:
- 提交名称(作为字符串)
- 有效载荷对象
所以如果你想传递多个道具,你应该将它们作为一个对象传递
this.$store.commit("deleteTest", this.idProject, e) // WON'T WORK
this.$store.commit("deleteTest", {data: this.idProject, e}) // WILL WORK
现在你可以打电话了deleteTest(state, {data, e})
第二个问题
你应该得到测试对象的索引而不是对象本身
const oneTest = allTestsOfProject.studies.find(q => q.id === e) // WON'T WORK
const oneTest = allTestsOfProject.studies.findIndex(q => q.id === e) // WILL WORK
现在您可以致电:allTestsOfProject.studies.findIndex (q => q.id === e)
删除您的测试
推荐阅读
- asp.net - 如何在 Reactjs NET 中使用第三方组件
- django - Wagtail / 在 mixin 中使用没有某些属性的 ListBlock
- macos - dotnet 5 本地源不存在(在 macOS 中)
- c# - Azure 环境中的 Asp.NET Core Identity 两因素身份验证与 Authenticator 应用程序问题
- python - 谷歌趋势 api python 的实时更新
- mysql - mySQL 根据评论数量找到前 3 个帖子
- powerapps - 在 PowerApps 门户中显示 Dataverse 图像
- apache-kafka - Kafka Ignite Sink Connector - Ignite 的配置文件
- ios - 在 SwiftUI 中按日期分组
- javascript - 从 nginx 服务器获取 pdf 或 csv 下载的 href url 链接