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 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">

 

这样问题就解决了~