问题：
错误提示如下：
解决问题的代码示例：
|
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"
>
|