快捷導(dǎo)航

vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法【加track-by='索引'】

更新時(shí)間：2019年03月15日 11:54:56 作者：白楊-M

這篇文章主要介紹了vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法,結(jié)合實(shí)例形式分析了vue.js通過(guò)在v-for循環(huán)中添加track-by='索引'解決重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題相關(guān)操作技巧,需要的朋友可以參考下

本文實(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>m.fzitv.net 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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue小白入門教程
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過(guò)實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-04-04
Vue組件上使用v-model之單選框
這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
vue3項(xiàng)目中各個(gè)文件的作用詳細(xì)介紹
在Vue3項(xiàng)目中,通常會(huì)有以下一些常見(jiàn)的目錄和文件,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中各個(gè)文件的作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
Vue2實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2024-03-03
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法
這篇文章主要給大家分享了vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法，下面文字圍繞vue全局過(guò)濾器的相關(guān)資料展開(kāi)具體的詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助
2021-11-11
vue2響應(yīng)式原理之Object.defineProperty()方法的使用
這篇文章主要介紹了vue2響應(yīng)式原理之Object.defineProperty()方法的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Nuxt3重點(diǎn)特性使用舉例問(wèn)題記錄
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目，這篇文章主要介紹了Nuxt3重點(diǎn)特性使用舉例記錄,需要的朋友可以參考下
2022-12-12
簡(jiǎn)單聊聊vue2.x的$attrs和$listeners
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下
2022-03-03
Elementui如何限制el-input框輸入小數(shù)點(diǎn)
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08