快捷導(dǎo)航

vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決

更新時(shí)間：2022年09月10日 10:20:42 作者：白佯們班的小莫

這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用數(shù)組splice方法失效,總刪除最后一項(xiàng)的問(wèn)題

今天在寫(xiě)項(xiàng)目的時(shí)候，遇到一個(gè)很簡(jiǎn)單的需求，下圖，點(diǎn)擊添加標(biāo)簽，左邊出現(xiàn)一個(gè)可以輸入的標(biāo)簽，點(diǎn)擊刪除按鈕，就能刪除當(dāng)前標(biāo)簽，很簡(jiǎn)單的需求，我卻搞了一個(gè)多小時(shí)(哎…新手愚笨啊)

今天在寫(xiě)項(xiàng)目的時(shí)候

一看到這個(gè)我的思路就是點(diǎn)擊添加標(biāo)簽，把新增的節(jié)點(diǎn)push到自己定義的數(shù)組里，然后渲染出來(lái)，點(diǎn)擊刪除按鈕，用splice方法從數(shù)組中刪除掉當(dāng)前的節(jié)點(diǎn)(很簡(jiǎn)單，很明確的思路嘛，但是卻事與愿違)

		<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">添加標(biāo)簽</span>
		// 點(diǎn)擊添加標(biāo)簽
        addTag(){
            this.tags.push({"tag":"<input type='text' />"})
        },
        //刪除標(biāo)簽
        deleteTag(index){
            this.tags.splice(index, 1)
        },

當(dāng)我點(diǎn)擊刪除的時(shí)候，總是刪除的是最后一個(gè)添加的節(jié)點(diǎn)，也就是新添加的那一個(gè)，我試了好多次，還是不行，回頭又看了好多次我的方法，以為下標(biāo)傳錯(cuò)了什么之類的，但是我反復(fù)看了四五遍，沒(méi)有發(fā)現(xiàn)錯(cuò)誤。

然后又對(duì)splice方法進(jìn)行了復(fù)習(xí)，又查閱了此方法還是不行。

于是我去網(wǎng)上搜(新手嘛，遇到了問(wèn)題，你懂得…)，網(wǎng)上也沒(méi)有相關(guān)問(wèn)題，只有一個(gè)說(shuō)到了，說(shuō)是vue的渲染問(wèn)題，當(dāng)你去刪除標(biāo)簽時(shí)，他重復(fù)執(zhí)行了方法，需要添加一個(gè)事件去重的方法，也沒(méi)太看懂，就去翻閱了官網(wǎng)，查看了vue的v-for渲染和唯一的key值。

我的問(wèn)題之所以會(huì)產(chǎn)生，是因?yàn)樵谟趉ey的綁定問(wèn)題，我只是用下標(biāo)來(lái)綁定每一個(gè)標(biāo)簽的key，而沒(méi)有與數(shù)組中元素掛鉤，因此當(dāng)刪除數(shù)組元素時(shí)，vue會(huì)采用一種叫做’就地復(fù)用‘的原則，將旁邊的元素直接拿過(guò)來(lái)使用，而vue官方有這樣一句話(官方文檔的重要性啊…)：

我的解決辦法是

push的時(shí)候?yàn)槊恳粭l元素添加一個(gè)id值，key值取它的id，與它的元素相關(guān)聯(lián)

		// 點(diǎn)擊添加標(biāo)簽
        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">添加標(biāo)簽</span>

這樣我的問(wèn)題就解決了，今天遇到的這個(gè)問(wèn)題認(rèn)為有必要記錄一下。

vue中splice()方法的使用

splice(index,len,item)是vue中數(shù)組變異的方法之一，可以用來(lái)刪除，更新，和增加數(shù)組內(nèi)容

參數(shù)

index: 數(shù)組下標(biāo)
len: 為1或0
item: 更新或增加的內(nèi)容

使用方法

1，刪除，當(dāng)參數(shù)形式為splice(index,1)時(shí)表示刪除下標(biāo)為index的內(nèi)容

2,更新，當(dāng)參數(shù)形式為splice(index,1,item)時(shí)表示用新的值item更新替換掉下標(biāo)為index的值

3，增加，當(dāng)參數(shù)形式為splice(index,0,item)時(shí)表示在下標(biāo)為index的位置增加一項(xiàng)值為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>