Vue3报错Property "items" was accessed during render 如何解决？

报错原因 #

选项式API中data()函数的返回值格式不符合Vue规范：Vue要求data()必须返回一个普通对象，对象下的所有属性才会被挂载到组件实例上，供模板访问。你当前直接返回了items数组，模板自然找不到名为items的属性，就触发了该报错。

修复方案 #

方案1：保持选项式API写法 #

仅修改data()的返回值，把items作为返回对象的属性即可：

// 错误写法
return items

// 正确写法
return {
  items
}

完整修正后代码：

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

方案2：使用组合式API（setup语法）写法 #

如果要使用更简洁的<script setup>语法，正确实现代码如下：

<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 setup>
import { ref } from 'vue'
import HelloWorld from "./components/HelloWorld.vue";

// 声明响应式数组
const items = ref([])
for (let index = 0; index < 5; index++) {
  // ref包裹的响应式变量修改值需要访问.value属性
  items.value.push({ title: `Test ${index}`, msg: `Test msg ${index}` })
}
</script>

内容的提问来源于stack exchange，提问作者Lorenzo Andreasi