Vue.js在数组中插入重复数据的实现代码

时间：2021-05-26

1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。

2、不使用track-by="$index"的数组插入，数组不支持重复数据的插入

2.1 JavaScript代码

2.2 html代码

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

2.2 结果

3、使用track-by="$index"的数组插入，数组支持重复数据的插入

3.1 Javascript代码

3.2 html代码

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

3.3 结果

4、完整代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> <style type="text/css"> .container{ margin-top: 20px; } </style> <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> </head> <body> <div id="app" class="container">  <ul> <li v-for="value in arrMsg" track-by="$index" > {{value}} </li> </ul> <button type="button" @click="add" >增加数据</button> </div> </body> </html>

ps：下面看下vue 数组重复，循环报错

Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。

总结

以上所述是小编给大家介绍的Vue.js在数组中插入重复数据的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

Vue.js在数组中插入重复数据的实现代码

相关文章

JS实现的数组去除重复数据算法小结

SQLServer中防止并发插入重复数据的方法详解

Vue.js实现价格计算器功能

Vue.js结合bootstrap实现分页控件

js数组中删除重复值的代码小结