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

I am not able to loop through days array. I am getting below error.

Error: [Vue warn]: Property or method "day" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Improve this question

2 Answers 2

Reset to default
5

Here is a similar question: Nuxt how to loop on an array and display the data properly with a v-for

And same as there, I do recommend generating some ids for properly handling of :key, otherwise you'll get an ESlint error.

<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 is essential, more info here: https://v2.vuejs.org/v2/style-guide/#Keyed-v-for-essential

Here a blog article explaining this: https://michaelnthiessen.com/understanding-the-key-attribute#dont-use-an-index-as-the-key

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You should use v-for directive like :

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

the directives are prefixed by v- and they are bound by default to the component methods and properties

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.