vue.js method of operating array data

This time I will bring you the method of operating array data in vue.js. What are the precautions for operating array data in vue.js? Here are the actual cases, let’s take a look.

1. By default, Vue.js does not support adding repeated data to an array. This can be achieved using track-by="$index".

2. Do not use track-by="$index" for array insertion. The array does not support the insertion of duplicate data

2.1

JavaScriptcode

<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: '#app', 
     data: { 
      arrMsg: ['apple', 'orage', 'pear'] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push('tamota'); 
      } 
     } 
    }); 
   } 
  </script>

2.2 html code

<p id="app"> 
   <!--显示数据--> 
   <ul> 
    <li v-for="value in arrMsg" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add">增加数据</button> 
  </p>

3. Use track-by="$index" to insert into the array. The array supports the insertion of repeated data

3.1 Javascript Code                                                 3.2 html code

<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
  <script type="text/javascript"> 
   window.onload = function() { 
    vm = new Vue({ 
     el: '#app', 
     data: { 
      arrMsg: ['apple', 'orage', 'pear'] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push('tamota'); 
      } 
     } 
    }); 
   } 
  </script>

4. Complete code

<p id="app" class="container"> 
   <!--显示数据--> 
   <ul> 
    <li v-for="value in arrMsg" track-by="$index" > 
     {{value}} 
    </li> 
   </ul> 
   <button type="button" @click="add" >增加数据</button> 
  </p>

ps: Let’s take a look at the vue array duplication,

LoopError reporting Vue.js does not support adding repeated data to arrays by default. This can be achieved using track-by="$index"

.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of vue.js method of operating array data. For more information, please follow other related articles on the PHP Chinese website!