快捷導(dǎo)航

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

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

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

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

問題：

錯(cuò)誤提示如下：

解決問題的代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問題</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.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)a標(biāo)簽href里添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-11-11
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細(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)版，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-04-04
vue在body和query中如何向后端傳參
這篇文章主要介紹了vue在body和query中如何向后端傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue記事本實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
詳解vue3中如何使用shaka-player
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽，文中通過示例代碼介紹的非常詳細(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
Vue命令行工具Vue-CLI圖文詳解(推薦!)
vue-cli 是 Vue.js 開發(fā)的標(biāo)準(zhǔn)工具,它簡(jiǎn)化了程序員基于 webpack 創(chuàng)建工程化的 Vue 項(xiàng)目的過程,下面這篇文章主要給大家介紹了關(guān)于Vue命令行工具Vue-CLI的相關(guān)資料,需要的朋友可以參考下
2022-07-07