Vue:Elements in iteration expect to have 'v-bind:key' directives的解决办法
1、Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的。我们可以更改vetur配置 :vscode文件->首选项->设置->搜索vetur.validation.Template,将这一项去掉就可以了2、我们在使用v-for的时候,在v-for 后添加 v-bind:key="item"<template><div ...
·
1、Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的。
我们可以更改vetur配置 :vscode文件->首选项->设置->搜索vetur.validation.Template,将这一项去掉就可以了
2、我们在使用v-for的时候,在v-for 后添加 v-bind:key="item"
<template>
<div id="vue">Hello Vue.js!{{message}}
<span>{{message1}}</span>
<span v-if="seen">你看到我啦!</span>
<div id="app-4">
<ol>
<li v-for="todo in todos" v-bind:key="todo">
{{ todo.text }}
</li>
</ol>
</div>
</div>
</template>
<div>
</div>
<script type="text/javascript">
export default {
// 这里需要将模块引出,可在其他地方使用
name: 'HelloVue',
data () {
// 注意:data即使不需要传数据,也必须return,否则会报错
return {
message: '你好使用者!',
message1: '页面加载于' + new Date().toLocaleTimeString(),
seen: true,
todos: [
{ text: '学习javascript' },
{ text: '学习Vue' },
{ text: '整个项目' }
]
}
}
}
</script>
<style type="text/css">
#vue {
color: green;
font-size: 28px;
}
</style>
注意以上的代码中我们这样使用: <li v-for="todo in todos" v-bind:key="todo">
这样问题就解决了~
更多推荐
已为社区贡献15条内容
所有评论(0)