VUE3: Property ... was accessed during render but is not defined on instance

Question

Hello I'm writing a simple Vue.js app and I want to use the v-for directive on the component HelloWorld using data from my items array.

Here is the code:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld
    v-for="(item, index) in items"
    :key="index"
    :title="item.title"
    :msg="item.msg"
  />
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    let items = [];
    for (let index = 0; index < 5; index++) {
      items.push({ title: `Test ${index}`, msg: `Test msg ${index}` });
    }
    return items;
  },
};
</script>

This is the error that I get:

Property "items" was accessed during render but is not defined on instance. at <App>

How can I fix this? I tried using setup() and ref but it didn't work.

Answer 1

You should return items as nested value of an object :

  data() {
    let items = [];
    for (let index = 0; index < 5; index++) {
      items.push({ title: `Test ${index}`, msg: `Test msg ${index}` });
    }
    return {
         items,
         //other properties
      };
  },