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

【问题标题】：VUE3: Property ... was accessed during render but is not defined on instanceVUE3：属性...在渲染期间被访问但未在实例上定义
【发布时间】：2021-11-05 05:36:56
【问题描述】：

您好，我正在编写一个简单的 VUE js 应用程序，我想使用我的 items 数组中的数据在组件 HelloWorld 上使用 v-for 指令。代码如下：

<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 但没有成功。

【问题讨论】：

标签： vue.js vuejs2 vuejs3

【解决方案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
      };
  },

【讨论】：