v-for on a <template>的一个小疑问

看官方文档说在使用v-for的时候,需要使用一个独一无二的key值来提升性能,说这是和虚拟dom有关。
但是我在template标签上面绑定v-for进行循环的时候,绑定key值显示报错了,但是页面正常输出数据来了

  • <template> cannot be keyed. Place the key on real elements instead.

这个意思我大概知道,应该是说key应该在真是的元素上面。
难道这种情况下的v-for就不用绑定key值吗?
代码:
<!DOCTYPE html>
<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'>
        <p>{{item.content}}</p>
        <span>{{item.id}}</span>
    </template>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:[
                {
                    id:0,
                    content:'小燕子是想气死我魏姐'
                },
                {
                    id:1,
                    content:'张雪迎工作室 澄清'
                },
                {
                    id:2,
                    content:'结婚登记率连续4年下降'
                },{
                    id:3,
                    content:'秦俊杰'
                }
            ],
        }
    })
</script>

</body>
</html>

clipboard.png

回复
阅读 16k
2 个回答

用key不能提升性能,是为了防止Vue默认的元素复用导致某些情况下出现数据绑定渲染问题,而template是虚拟节点,不存在复用,如果你想要绑定的话,给下面的p和span标签绑定就好,一般只需要给和数据绑定有关的元素绑定key值

这就是一个反人类的设计,v-for既要:key,但又不能在template上加:key,那么循环必须放在html标签上而不能放在template上,生成一堆垃圾代码,不过如果v-for用在template上,不加:key,可以无视警告,或者把 eslint关了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏