当 nuxt 中的 props 发生变化时如何更新组件

Question

我想每次在组件中的道具发生变化时获取数据并在不重新加载页面的情况下显示它。

页面/发票/index.vue：

<template>
<div>
 <b-table-column
     field="InvoiceNo"
     label="Invoice No"
     sortable
     v-slot="props"
     >
      <a @click="selectInvoice(props.row.id)">
         {{ props.row.invoiceNumber }}
      </a>
 </b-table-column>
<Invoice :invoiceId="selectedInvoice" />
</div>
</template>

<script>
import axios from "axios";
import Invoice from "../../../components/Invoice.vue";
export default {
  components: {
    Invoice,
  },
  data() {
    return {
      selectedInvoice: "",
   }
  },
methods: {
   selectInvoice(invoiceId) {
    this.selectedInvoice = invoiceId;
   },
}

}

</script>

组件/发票.vue：

    <script>
import axios from "axios";
export default {
  props: ["invoiceId"],
  data() {
    return {
      invoiceData: "",
    };
  },

  watch: {
    invoiceId: function (newVal, oldVal) {
      this.fetchData(newVal)
    },
    deep: true,
    immediate: true,
  },

  methods: {
    async fetchData(invoiceId) {
      let { data: invoiceDetails } = await axios.get(
        `${process.env.backendapi}/invoice/byid?invoiceId=${invoiceId}`
      );
      return {
        invoiceData: invoiceDetails,
      };
    },
  },
};
</script>

当我选择/更改发票时，我可以看到每次使用所选发票调用后端 api，但发票数据始终为空白。返回的结果未在 invoiceData 中更新。

Answer 1

我想你想要 fetchData 方法中的以下内容

this.invoiceData = invoiceDetails

代替

return {}

只有已经存在的数据和fetch vue/nuxt函数需要返回一个对象