vue3無法訪問方法中的資料物件

我的 vue3 應用程式出錯。我正在嘗試在methods{}命中 dynamodb的塊中創建一個函式，并創建一個資料串列，我想將其傳遞給帶有道具的子組件。我正在呼叫created(){}塊中與 dynamoDB 通信的函式。

我不太擅長傳遞資料。相反，我在嘗試填充塊中的productsData物件時收到以下錯誤data(){}。

我將 my 的型別設定為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>

uj5u.com熱心網友回復：

productsData初始化為products，但products缺少道具（如錯誤訊息中所示），因此兩者都是undefined.

根據您的評論，您實際上根本不需要products道具。您正在productsData[]通過將資料推入getProductsData()（從created()鉤子呼叫）中進行設定，因此products道具甚至沒有發揮作用。

解決方案似乎是洗掉productsprop，并productsData使用型別斷言 ( as DBResponse[])初始化為空陣列：

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

標籤：打字稿 Vue.js Vuejs3

上一篇：Vue/Vuex：區分陣列和代理物件中的物件

下一篇：vue對話框不會關閉/隱藏