Vuex 的项目实例5 删除对应事项
1、给删除按钮添加点击事件:
<!--删除链接--> <a slot="actions" @click="delItem(item.id)">删除</a> <script> export default { methods: { // 删除对应事项 delItemById(id) { this.$store.commit('delItem', id) } } } </script>
2、在 store/index.js 文件中添加delItem :
mutations: { // 根据 id 删除列表的 item 项 delItem(state, id) { // 根据 id 查找对应项的索引 state.list.forEach((item, index) => { if (id === item.id) { // 根据索引,删除对应的元素 state.list.splice(index, 1) } }) } // 也可以这样写 delItem(state, id) { // 根据 id 查找对应项的索引 const index = state.list.findIndex(item => item.id === id) // 根据索引,删除对应的元素 if (index !== -1) { state.list.splice(index, 1) } } }
此时点击删除按钮,对应项的事项就被删除掉了。