Detailed explanation of inserting duplicate data into arrays with Vue.js

This article mainly introduces the implementation code of Vue.js inserting repeated data into an array. Friends who need it can refer to it. I hope it can help everyone.

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. Arrays do not support the insertion of duplicate data.

2.1 JavaScript 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>

2.2 html code

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

2.2 Result

3. Use track-by="$index" for array insertion. The array supports the insertion of duplicate 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>

3.3 Results

##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 and loop error

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

Related recommendations:

Mysql deletes duplicate data and keeps the smallest id

Mysql query table duplicate data method

Processing of duplicate data in php array

The above is the detailed content of Detailed explanation of inserting duplicate data into arrays with Vue.js. For more information, please follow other related articles on the PHP Chinese website!