vue 3 无法访问方法中的数据对象

Question

我的 vue3 应用出现错误。我正在尝试在 methods{} 块中创建一个函数，该函数命中 dynamodb，并创建一个数据列表图，我想将其传递给带有道具的子组件。我在 created(){} 块中调用与 dynamoDB 通信的函数。

我不太擅长传递数据。相反，当我尝试在 data(){} 块中填充 productsData 对象时出现以下错误。

我正在将 products prop 的类型设置为我定义的接口。

然后我将 productsData data 对象转换为 products prop 类型。

出于某种原因，我无法 push() 映射到 this.productsData 对象，因为它是 undefined。

这是错误

[Vue warn]: Missing required prop: "products" 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:6589
TypeError: _this.productsData is undefined

html:

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

打字稿代码：

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { DynamoDBClient, QueryCommand } from "@aws-sdk/client-dynamodb";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";
import DBResponse from "@/interfaces/DBResponse";
import HelloWorld from "@/components/HelloWorld.vue";

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
  props: {
    products: {
      type: Object as PropType<DBResponse[]>,
      required: true,
    },
  },
  data() {
    return {
      key: 0,
      productsData: this.products,
    };
  },
  methods: {
    forceRerender() {
      this.key += 1;
    },
    async getProductData() {
      const region = process.env.VUE_APP_AWS_REGION as string;
      const clientDynamoDB = new DynamoDBClient({
        region,
        credentials: fromCognitoIdentityPool({
          identityPoolId: process.env.VUE_APP_IDENTITY_POOL_ID as string,
          accountId: process.env.VUE_APP_AWS_ACCOUNT_ID,
          clientConfig: { region },
        }),
      });
      const query_input = {
        TableName: process.env.VUE_APP_TABLE_NAME,
        IndexName: "GSI1",
        KeyConditionExpression: "SK = :sort_key and DK1 = :data_key",
        ExpressionAttributeValues: {
          ":sort_key": { S: "PRODUCT#BLEND" },
          ":data_key": { S: "listed" },
        },
        Select: "ALL_ATTRIBUTES",
      };
      const command = new QueryCommand(query_input);
      try {
        const results = await clientDynamoDB.send(command);
        const items = results.Items;
        const cloudfrontHost = process.env.VUE_APP_CLOUDFRONT_HOST as string;
        if (items) {
          for (const key in items) {
            const item = items[key];
            this.productsData.push({
              id: item.PK.S?.split("PRODUCT#")[1],
              name: item.Name.S,
              src: cloudfrontHost.concat(
                "/products/assets/",
                item.PK.S?.split("PRODUCT#")[1] as string,
                ".png"
              ),
              description: item.Description.S,
              price: item.Price.S,
            });
          }
        }
      } catch (err) {
        console.error(err);
      }
      console.log(this.productsData);
      this.forceRerender();
    },
  },
  created() {
    this.getProductData();
  },
});
</script>

Answer 1

productsData 初始化为 products，但是缺少 products 属性（如错误消息中所示），因此两者都是 undefined.

根据您的，您实际上根本不需要 products 道具。您通过在 getProductsData() 中将数据推送到其中来设置 productsData[]（从 created() 挂钩调用），因此 products 道具甚至没有发挥作用。

解决方案似乎是删除 products 属性，并将 productsData 初始化为具有类型断言的空数组 (as DBResponse[]):

export default defineComponent({
  //props: {
  //  products: {
  //    type: Object as PropType<DBResponse[]>,
  //    required: true,
  //  },
  //},
  data() {
    return {
      //productsData: this.products,
      productsData: [] as DBResponse[]
    };
  },
})

vue 3 无法访问方法中的数据对象

vue 3 unable to access data object in method

typescript

vue.js

vuejs3