vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加怎么辦

發(fā)布時(shí)間：2021-06-26 15:35:30 來源：億速云閱讀：205 作者：小新欄目：web開發(fā)

小編給大家分享一下vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

問題：

錯(cuò)誤提示如下：

vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加怎么辦

解決問題的代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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 v-for循環(huán)重復(fù)數(shù)據(jù)無法添加怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加怎么辦

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽