如何在 Vue/Nuxt 中正确迭代对象数组

Question

<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 warn]：属性或方法“day”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是反应性的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

Answer 1

这是一个类似的问题：Nuxt how to Loop on an array and display the dataproperly 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 ://v2.vuejs.org/v2/style-guide/#Keyed-v-for-essential

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