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

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

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

本文實例講述了vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法。分享給大家供大家參考，具體如下：

問題：

錯誤提示如下：

解決問題的代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題</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">

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

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