look at the official documentation that when using v-for, you need to use a unique key value to improve performance, saying that this is related to virtual dom.
but when I bind v-for to the template tag for looping, the binding key value shows an error, but the page outputs data normally
- < template > cannot be keyed. Place the key on real elements instead.
, which means that key should be on top of the real element.
does the v-for in this case not have to bind the key value?
Code:
< html lang= "en" >
< head >
<meta charset="UTF-8">
<title>vuetest.html</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script> < / head >
< body >
<div id="app">
<template v-for="(item,index) in list" :key="item.id">
{{item.content}}
<span>{{item.id}}</span>
</template>
</div>
<script>
var vm = new Vue({
el:"-sharpapp",
data:{
list:[
{
id:0,
content:""
},
{
id:1,
content:" "
},
{
id:2,
content:"4"
},{
id:3,
content:""
}
],
}
})
</script> < / body >
< / html >
