vue.js 如何在v-for中绑定源属性

pkln4tw6  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(190)

在此教程中
如下面的代码所示,我尝试迭代items数组并在运行时显示item.message,收到以下错误:

Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

请让我知道如何在v-for中绑定源属性

代码

<template>
  <li v-for="item in items">
    {{ item.message }}
  </li>
</template>

<script>

export default {
  name: 'App',
}
</script>

<script setup>
import {ref} from 'vue' 

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

</script>
ibrsph3r

ibrsph3r1#

阅读Vue文档中的:key:https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key为了让你的生活更轻松,只要总是通过在列表中的对象中选择一些唯一的值来为v-for提供:key,在你的情况下,似乎是message,因为你没有任何id属性:

<template>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</template>

相关问题