Vue3 methods中无法访问data对象productsData undefined报错如何解决

问题根源 #

你的两个报错是连锁触发的：

1. 你给Home组件定义了必填的products属性，但Home是路由组件，路由加载时没有传入该属性，所以触发Missing required prop: "products"警告，此时this.products本身就是undefined
2. 你在data初始化时直接把productsData赋值为this.products，自然productsData也为undefined，后续调用push()方法时报错

修复步骤 #

1. 删除不必要的prop定义：products是你在Home内部请求DynamoDB生成的数据，不需要定义为外部传入的prop，直接删掉props块的所有配置
2. 给productsData设置默认初始值：要调用push必须初始化为空数组
3. 修正模板传值：给子组件HelloWorld传值时用你内部填充的productsData，而非不存在的prop
4. （可选）删除强制重渲染逻辑：Vue的响应式系统会自动检测productsData的变化更新子组件，不需要手动修改key强制重渲染

修改后的核心代码示例 #

模板部分

<template>
  <div class="home">
    <HelloWorld :products="productsData" />
  </div>
</template>

script部分核心修改

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
  // 删掉原来的props块
  data() {
    return {
      // 不需要key了可以删掉，要保留也没问题
      productsData: [] as DBResponse[], // 初始化为空数组
    };
  },
  methods: {
    // forceRerender方法可以删掉
    async getProductData() {
      // 原有DynamoDB请求逻辑不变
      // ...
    },
  },
  created() {
    this.getProductData();
  },
});

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