VUE3：属性...在渲染期间被访问，但未在实例上定义

Question

您好，我正在编写一个简单的 Vue.js 应用程序，我想使用项目数组中的数据v-for在组件上使用该指令。HelloWorld

这是代码：

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

这是我得到的错误：

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

我怎样才能解决这个问题？我尝试使用setup()，ref但没有成功。

Answer 1

您应该返回items作为对象的嵌套值：

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