vue使用数组splice方法失效,且总删除最后一项的问题及解决

目录
  • 使用数组splice方法失效,总删除最后一项的问题
    • 我的解决办法是
  • vue中splice()方法的使用
    • 参数
    • 使用方法
    • 案例

使用数组splice方法失效,总删除最后一项的问题

今天在写项目的时候，遇到一个很简单的需求，下图，点击添加标签，左边出现一个可以输入的标签，点击删除按钮， 就能删除当前标签，很简单的需求，我却搞了一个多小时(哎…新手愚笨啊)

一看到这个我的思路就是点击添加标签，把新增的节点push到自己定义的数组里，然后渲染出来，点击删除按钮，用splice方法从数组中删除掉当前的节点(很简单，很明确的思路嘛，但是却事与愿违)

		<div
             class="addtag"
              v-for="(i,index) in tags"
              :key="i.index"
          >
	         <div v-html="i.tag" class="tags">{{i.tag}}</div>
	         <span @click='deleteTag(index)' class='fa fa-close'></span>
   		</div>
    	<span v-show='tags.length > 4 ? false : true' @click="addTag" class="fa fa-plus-square-o">添加标签</span>
		// 点击添加标签
        addTag(){
            this.tags.push({"tag":"<input type='text' />"})
        },
        //删除标签
        deleteTag(index){
            this.tags.splice(index, 1)
        },

当我点击删除的时候，总是删除的是最后一个添加的节点，也就是新添加的那一个，我试了好多次，还是不行，回头又看了好多次我的方法，以为下标传错了什么之类的，但是我反复看了四五遍，没有发现错误。

然后又对splice方法进行了复习，又查阅了此方法还是不行。

于是我去网上搜(新手嘛，遇到了问题，你懂得…)，网上也没有相关问题，只有一个说到了，说是vue的渲染问题，当你去删除标签时，他重复执行了方法，需要添加一个事件去重的方法，也没太看懂，就去翻阅了官网，查看了vue的v-for渲染和唯一的key值。

我的问题之所以会产生，是因为在于key的绑定问题，我只是用下标来绑定每一个标签的key，而没有与数组中元素挂钩，因此当删除数组元素时，vue会采用一种叫做’就地复用‘的原则，将旁边的元素直接拿过来使用，而vue官方有这样一句话(官方文档的重要性啊…)：

我的解决办法是

push的时候为每一条元素添加一个id值，key值取它的id，与它的元素相关联

		// 点击添加标签
        addTag(){
            ++this.tagNum;
            this.tags.push({"tag":"<input type='text' />", 'id':this.tagNum})
        },
	 <div
	      class="addtag"
	      v-for="(i,index) in tags"
	      :key="i.id"
	  >
	      <div v-html="i.tag" class="tags">{{i.tag}}
	      </div>
	      <span @click='deleteTag(index)' class='fa fa-close'></span>
	  </div>
	  <span v-show='tags.length > 4 ? false : true' @click="addTag" class="fa fa-plus-square-o">添加标签</span>

这样我的问题就解决了，今天遇到的这个问题认为有必要记录一下。

vue中splice()方法的使用

splice(index,len,item)是vue中数组变异的方法之一，可以用来删除，更新，和增加数组内容

参数

  • index: 数组下标
  • len: 为1或0
  • item: 更新或增加的内容

使用方法

1，删除，当参数形式为splice(index,1)时表示删除下标为index的内容

2,更新，当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值

3，增加，当参数形式为splice(index,0,item)时表示在下标为index的位置增加一项值为item

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="demo">
			<ul>
				<li v-for="(m,index) in person" :key="index">
					<span>{{index}}--</span><span>{{m.name}}--</span><span>{{m.age}}---</span>
					<button @click="deletep(index)">删除---</button>
					<button @click="updatep(index,{name:'shanghai',age:304})">更新---</button>
					<button @click="addp(index,{name:'shanghai',age:132})">增加</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#demo",
			data: {
				person: [{	name: "zhangsan",age: "112"},
					{	name: "zhangsan",age: "112"},
					{	name: "zhangsan",age: "112"},
					{	name: "zhangsan",age: "112"}]
			},
			methods:{
				deletep(index){
					this.person.splice(index,1);
				},
				updatep(index,newp){
					this.person.splice(index,1,newp)
				},
				addp(index,newp){
					this.person.splice(index,0,newp)
				}
			}
		})
	</script>
</html>

运行效果如上，当点击删除下标为0的项时得到的效果如下

当点击更新按钮时得到的效果如下

当点击增加按钮时得到的效果如下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue清空数组的几个方式(小结)

    vue清空数组的几个方式(小结)

    目录 1. 前言 2. 清空数据的几种方式 2.1 使用ref() 2.2 使用slice 2.3 length赋值为0 2.4 使用splice 3. 总结 1. 前言 前两天在工作当中遇到一个问题,在vue3中使用reactive生成的响应式数组如何清空,当然我一般清空都是这么写: let array = [1,2,3]; array = []; 不过这么用在reactive代理的方式中还是有点问题,比如这样: let array = reactive([1,2,3]); watch(()=

  • vue项目无法删除的问题及解决

    vue项目无法删除的问题及解决

    目录 vue项目无法删除 vue新增与删除问题 vue项目无法删除 问题 今天删除本地的vue项目,一直提示“操作无法完成,因为其中的文件夹或文件已在另一个程序组打开,请关闭该文件夹或文件,然后重试”. 但是相关的软件我都关闭了,还是不行.如图 解决 我们ctrl+alt+delete打开任务管理器,点击详细信息,找到node.exe 右击选择结束任务,然后点击结束进程,然后就可以成功删除项目了. vue新增与删除问题 <template>   <div>     <ul v

  • Vue.$set 失效的坑 问题发现及解决方案

    Vue.$set 失效的坑 问题发现及解决方案

    偶然在项目中发现Vue.$set失效 有这样一个需求 添加数据过滤用 左边是控件选择 中间是条件 右边是值 因为会根据控件不同渲染不同的值选项控件 <el-form inline > <el-form-item style="margin-bottom: 20px;"> <el-select v-model="data[props.prop]" @change="data[props.value] = ''">

  • Vue实现push数组并删除的例子

    最近在用Vue做评论互动的时候用到了push,因为项目是迭代开发,所以现在做一个简易的demo回顾下 <template> <div> <ul v-for="(item , index) in list" :key="index"> <li> {{item.serial}}--- <button @click="remove(index)">删除</button> </

  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    目录 使用数组splice方法失效,总删除最后一项的问题 我的解决办法是 vue中splice()方法的使用 参数 使用方法 案例 使用数组splice方法失效,总删除最后一项的问题 今天在写项目的时候,遇到一个很简单的需求,下图,点击添加标签,左边出现一个可以输入的标签,点击删除按钮, 就能删除当前标签,很简单的需求,我却搞了一个多小时(哎…新手愚笨啊) 一看到这个我的思路就是点击添加标签,把新增的节点push到自己定义的数组里,然后渲染出来,点击删除按钮,用splice方法从数组中删除掉当前

  • js操作两个json数组合并、去重，以及删除某一项元素

    两个json数组合并去重,以及删除某一项元素 let ha = [ {id:'H',name:'3'}, {id:'A',name:'6'}, {id:'B',name:'14'}, {id:'C',name:'60'} ]; let hb= [ {id:'H',name:'2'}, {id:'A',name:'6'}, {id:'B',name:'16'}, {id:'N',name:'2'}, {id:'C',name:'19'} ]; // 合并两个json数组,并去重; ha= Obje

  • JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)

    复制代码 代码如下: Array.prototype.ArrayInsertAfter=function(Num,obj) { var tempArr=new Array(); var l=this.length; for(var i=0;i<l;i++) { tempArr.push(this.shift()); } l=tempArr.length; for(var i=0;i<l;i++) { this.push(tempArr.shift()); if(i==Num) { this.p

  • JavaScript splice()方法详解

    定义和用法splice() 方法用于插入.删除或替换数组的元素.语法arrayObject.splice(index,howmany,element1,.....,elementX)参数 描述index 必需.规定从何处添加/删除元素.该参数是开始插入和(或)删除的数组元素的下标,必须是数字. howmany 必需.规定应该删除多少元素.必须是数字,但可以是 "0".如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素. element1 可选.规定要添加到数组的新元素.

  • 简单了解vue.js数组的常用操作

    数组的相关方法如下 1,锁定数组的长度(只读模式)[ Array.join() ] var a = [1,2,3] //定义一个数组<br> Object.defineProperty(a,"length",{ writable:false }) //将a数组的长度属性设为只读<br> a.length = 0 //将a的长度改为0<br> console.log(a.length); //打印a数组的长度,还是3 2.将数组合并成字符串(返回字符串

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • 浅谈Vue响应式(数组变异方法)

    浅谈Vue响应式(数组变异方法)

    前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的

  • 浅析vue.js数组的变异方法

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 都有什么功能?动手试验了一下: <body> <div id="app"> <div> push方法: <input type="text" v-model="text" @keyup.enter="me

  • 使用vue中的v-for遍历二维数组的方法

    如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组),还有一个可选参数this 匿名函数中的this默认是指向window的 对空数组不会调用回调函数 不会改变原数组(某些情况下可改变) 2. forEach (1) 没有返回值. var

随机推荐