17. Vue 常用列表操作实例 - 删除列表数据

17. Vue 常用列表操作实例 - 删除列表数据

需求

上一篇章介绍了列表操作中的数据新增的功能，本篇章来看看删除数据的功能。

思路

如果要删除列表中的数据，那么该如何删除呢？

删除数据需要基于数据的​​id​​​号，需要将数据的​​id​​传递到删除方法中根据​​id​​​，找到要删除这一项的数组索引​​index​​如果找到索引​​index​​​了，直接调用 数组的​​splice(index,1)​​ 方法删除数据

实例代码

在编写删除方法前，先提供示例的代码，方便读者阅读，如下:

实现删除的方法

1. 删除数据需要基于数据的​​id​​​号，需要将数据的​​id​​传递到删除方法中

2. 根据​​id​​​，找到要删除这一项的数组索引 ​​index​​

在这里已经有了数组list中的id号，那么根据这个id号就可以查询到该数组在数组中的索引index。

那么基于​​ES6​​​，提供了几个新方法便于数组可以根据值来定义索引，例如：​​some​​​ ​​findIndex​​。下面来先一个简单的完成示例。

2.1 使用​​some​​​方法遍历数组，当​​return true​​则终止循环

那么再来看看​​findIndex​​方法来定位数组的索引。

2.2 使用​​findIndex​​方法定位数组的索引

可以看出​​findIndex​​​方法直接就将终止位置的索引​​index​​返回。

3. 使用索引​​index​​​直接调用 数组的 ​​splice(index,1)​​ 方法删除数

根据上面找到的索引​​index​​来删除数据，如下：

浏览器执行删除如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。