【问题标题】：How to properly iterate on array of objects in Vue/Nuxt如何正确迭代 Vue/Nuxt 中的对象数组
【发布时间】：2021-09-07 21:51:19
【问题描述】：

<template>
  <div>
    <h1>Hello World</h1>
    <div>
      <span :for="day in days">{{ day }} </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data() {
    return {
      days: ['Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
    }
  },
}
</script>

我无法遍历`days` 数组。我遇到了错误。

错误：[Vue 警告]：属性或方法“day”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

这里有一个类似的问题：Nuxt how to loop on an array and display the data properly with a v-for

和那里一样，我确实建议生成一些 id 以正确处理 :key，否则你会得到一个 ESlint 错误。

<template>
  <div>
    <h1>Hello World</h1>
    <div>
      <span v-for="day in days" :key="day.id">
        {{ day.name }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data() {
    return {
      days: [
        { id: 1, name: "Mon" },
        { id: 2, name: "Tue" },
        { id: 3, name: "Wed" },
        { id: 4, name: "Thurs" },
        { id: 5, name: "Fri" },
        { id: 6, name: "Sat" },
        { id: 7, name: "Sun" },
      ]
    }
  },
}
</script>

:key 是必不可少的，更多信息在这里：https://vuejs.org/v2/style-guide/#Keyed-v-for-essential

这里有一篇博客文章对此进行了解释：https://michaelnthiessen.com/understanding-the-key-attribute#dont-use-an-index-as-the-key

【讨论】：

【解决方案2】：

您应该使用v-for 指令，例如：

<span v-for="day in days">{{ day }}</span>

指令以v-为前缀，默认绑定到组件方法和属性

【讨论】：

我无法遍历days 数组。我遇到了错误。

我无法遍历`days` 数组。我遇到了错误。