vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法【加track-by='索引'】
本文實(shí)例講述了vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法。分享給大家供大家參考,具體如下:
問(wèn)題:
錯(cuò)誤提示如下:
解決問(wèn)題的代碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題</title> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by="$index"> {{val}} </li> </ul> </div> <script> var vm=new Vue({ data:{ arr:['apple','pear','orange'] }, methods:{ add:function(){ this.arr.push('tomato'); } } }).$mount('#box'); </script> </body> </html>
注意:這里在<li v-for="val in arr">
中添加了track-by="$index"
即:
<li v-for="val in arr" track-by="$index">
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
- 淺談vue.js中v-for循環(huán)渲染
- 解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題(v-for循環(huán)值刷新等)
- vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
- Vue中的v-for循環(huán)key屬性注意事項(xiàng)小結(jié)
- vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄
- vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
- Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
- 關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題
- VUE v-for循環(huán)中每個(gè)item節(jié)點(diǎn)動(dòng)態(tài)綁定不同函數(shù)的實(shí)例
- vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
- vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
相關(guān)文章
vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07