在vue中用spilce删除数据总是删除最后一条

最新推荐文章于 2024-05-21 14:36:32 发布
最新推荐文章于 2024-05-21 14:36:32 发布
阅读量2.9k 收藏 2
点赞数 3
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58714199/article/details/121417753
版权

我们在vue中绑定key值时一般都喜欢用index，那当我们的key值用index时的同时，splice也用到了index，这样就会使我们的key造成渲染错误，从而导致splice一直删除最后一条数据。关于key大家可以看下官网的描述。

 解决方案：

        给数组添加一个id，让key绑定id，这样splice就可以根据索引删除数据了。

下面是vue官网，大家可以去看一下！！

API — Vue.js (vuejs.org)

橱窗的微光
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现动态创建和删除数据的方法
08-27
在本文中，我们将使用一个简单的例子来演示如何使用 Vue 实现动态创建和删除数据。 HTML 和 CSS 首先，我们需要创建一个 HTML 文件，并在其中添加一个 div 元素作为应用程序的容器。在 style 标签中，我们添加了...
el-table想要删除指定行但是删除的永远都是最后一行，解决办法（亲测有效）
qq_51436515的博客
11-30 1614
这里的问题是由于虚拟dom渲染的时候会进行节点对比，如果不添加id的话会默认用index，这样我想学前端的话知道v-for中key的作用就是这个。标签绑定的data是这样一个数组 [{id:0},{id:1},{id:2}]el-table属性的作用你可以仔细去看看，理解理解。因此首先在标签添加属性。然后id是不是呼应上了，你再试试就对了。添加之后我们肯定是要绑定数据的。
vue用splice删除最后一条
weixin_44426574的博客
10-10 1868
vue中用spilce删除数据总是删除最后一条
删除最后一个字符 js vue 前端
最新发布
global_coding的博客
05-21 379
删除最后一个字符 js vue 前端
vue 项目中 splice 删除的不是指定的位置 而是最后一个
Admans的专栏
12-05 1496
问题就是v-for选择里面 删除数组指定元素 结果splice删除的永远都是最后一个 原本以为很简单的删除 结果事与愿违 现实给你一个玩笑 他删除的不是你指定位置的 而是一直都是最后一个 ，这个是因为vue的机制原理造成的 因为在于key的绑定问题，我只是用下标来绑定每一个标签的key，而没有与数组中元素挂钩，因此当删除数组元素时，vue会采用一种叫做’就地复用‘的原则，将旁边的元素直接拿过来使用知道是KEY的原因就好办了，那就把KEY换成唯一的 可以是时间戳 也可以ID 保证唯一性就可以了
vue 使用数组splice方法失效，且总是删除最后一项的解决办法。
一个前端的自述
06-22 1万+
今天在写项目的时候，遇到一个很简单的需求，下图，点击添加标签，左边出现一个可以输入的标签，点击删除按钮， 就能删除当前标签，很简单的需求，我却搞了一个多小时(哎…新手愚笨啊) 一看到这个我的思路就是点击添加标签，把新增的节点push到自己定义的数组里，然后渲染出来，点击删除按钮，用splice方法从数组中删除掉当前的节点(很简单，很明确的思路嘛，但是却事与愿违) <div ...
vue删除数组内容,div或元素都是从最下面的开始删除
CSGO_888的博客
06-27 257
当vue点击删除数组元素时候,无论点哪个div都是删除最后一个。造成的原因:vue的v-for中 key。解决:用数据自身的ID即可。
vue2.0实现列表数据增加和删除
10-15
主要为大家详细介绍了vue2.0实现列表数据增加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 循环加载数据并获取第一条记录的方法
12-29
最近使用elment ui和vue.js，遇到需要像c:foreach类似的效果，就找了 vue的API：https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if element ui：http://element.eleme.io/#/zh-CN/component/input 用法： ...
vue.js删除列表中的一行
10-18
给大家分享了vue.js删除列表中的一行的实例操作以及代码分享，有兴趣的朋友参考下。
vue+elementui Table组件splice删除表格总是删除最后一行
weixin_44166439的博客
03-03 3235
原因是没有给table下面的row加key,才导致的问题 解决方法： 在 el-table 标签里 加一个 row-key 属性 <el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" border> <el-table-column prop="number" label="服务件数"> </el-tabl
Element-ui table splice 移除数组元素 页面只会删除最后一行 视图和数据不对等
weixin_43848954的博客
06-24 2349
搭建Vue后台，用了vue-element-admin开源项目，里面的Element-ui table表格删除元素视图更新有误 <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="Actions" width="120"> <.
VUE数组根据索引删除数据，页面同时更新的方法
weixin_43725548的博客
05-23 2012
项目场景： 例如：做了一个进制转换的工具，点击删除的时候需要表格实时进行更新。 问题描述 例如：尝试了使用 this.$set 但是还是有问题。有时候会导致更新失败 解决方案： 最后查了一会资料发现 this.tableData.splice(this.tableData.indexOf(index),1) 是最有效果的 代码如下： // 删除某个记录 handleDelete(index, row) { // 尝试的第一种方法：（这个是错误的！！！会导致有时候失效）
删除数组中的最后一个元素
木槿之夏
12-27 1万+
链接：https://www.nowcoder.com/questionTerminal/df4b0b7a459447538351c4c7008b34e7利用slice()和pop()方法 function(arr) { var m = arr.slice(); m.pop(); return m; } //利用slice function truncate(arr) {
splice() 函数详解
yuanyixiang6的博客
04-10 1万+
JavaScript Array.splice() 函数详解
JavaScript学习--splice()函数详解
热门推荐
xian的博客
09-07 16万+
splice()函数详解 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组。 参数： index —— 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany —— 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, …, itemX —— 可选。向数组添加的新项目。 返回值 Array —— 包含被删除项目的新数组，如果有的话。 一、情况一 示例：pandas 是基于NumPy 的
vue splice
07-31
在Vue.js中，splice()方法可以用于在数组中插入或删除元素。它可以在指定的位置插入一个或多个元素，并且可以选择删除指定位置的元素。在Vue.js中，可以使用splice()方法来修改数组中的元素，从而实现对视图的更新。[1][2] 例如，如果你有一个名为list的数组，你可以使用splice()方法在指定位置插入元素。例如，使用splice()方法在数组的第二个位置插入元素2、3、4： ```javascript methods: { change() { this.list.splice(1, 0, 2, 3, 4); } } ``` 这将在数组的第二个位置插入元素2、3、4，并且保持其他元素的顺序不变。Vue.js在更新已渲染的元素列表时，默认使用"就地复用"策略。这意味着当数据项的顺序发生变化时，Vue.js不会移动DOM元素来匹配数据项的顺序，而是简单地复用已经渲染过的元素，并确保它们在特定的索引下显示。[3] 总结起来，Vue.js中的splice()方法可以用于在数组中插入或删除元素，并且在更新已渲染的元素列表时，Vue.js使用"就地复用"策略来提高性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值