vue v-for循環重復數據無法添加問題解決方法【加track-by='索引'】
阿新 • • 發佈:2019-04-11
註意 file lsp pla space 重復 word syn 圖片
問題:
錯誤提示如下:
解決問題的代碼示例:
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>www.jb51.net vue v- for 循環重復數據無法添加問題</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"
即:
?1 |
< li v-for = "val in arr" track-by = "$index" >
|
vue v-for循環重復數據無法添加問題解決方法【加track-by='索引'】