javascript - 当我想写数组时 v-for 返回错误

Question

我希望我的数组数据显示在列表中，但我看到以下错误：

error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src\components\Kubismyk.vue:5:9:

我的组件：

<template>
  <div>
      <h1>{{ title }}</h1>
      <ul>
        <li v-for="ninja in ninjas">{{ ninja }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
          title:'hello world',
          ninjas: ['yoshi','mario','ryu']
      }
  }
}
</script>

标签： javascripthtmlvue.js

Answer 1

使用 v-for 时需要绑定 v-key：

<ul v-for="ninja in ninjas" v-bind:key="ninja.id">
<li>{{ ninja.name }}
</ul>```