道具对象的属性在刷新函数中未定义答案

【问题标题】：The prop object's property is undefined in refresh function道具对象的属性在刷新函数中未定义
【发布时间】：2020-03-15 18:10:27
【问题描述】：

我使用 Vue.js 并且有一个组件。我将一个道具“请求”传递给该组件：

<adjustments-list
  v-if="request"
  :request="request"
/>

在组件中我可以做到这一点：

<text-input
  :value="request.id"
/>

显示“id”的值是有效的。

在组件的 props 部分：

props: {
  request: Object

在组件的挂载钩子中：

async mounted () {
  await this.refresh()
},

在组件的刷新功能中：

async refresh () {
  console.log('this.request.id =', this.request.id)
  if (this.request.id) {
    const data = await requestApi.getRequestResultAdjustmentByReqId(this.request.id)
  }
},

this.request.id 未定义。

我不知道为什么。

【问题讨论】：

请求属性是从父组件传递的？我认为当子组件只是“安装”时，该属性还没有被初始化或其他什么。
是的。请求属性已从父组件传递。但是，如何让它发挥作用呢？
也许您可以为该属性添加一个“手表”并从那里开始？

标签： vue.js

【解决方案1】：

如果request 属性对组件是异步可用的，那么您必须使用以下观察者的组合：

// adjustments-list component
new Vue({

  props: {
    request: Object
  },

  data() {
    return {
      apiData: null
    }
  },

  watch: {
    request(newValue, _oldValue) {
      this.refresh(newValue);
    }
  },

  mounted: function () {
    // Do something here
  },

  methods: {

    refresh (request) {
      if (request.id) {
        // Using promise instead of async-await
        requestApi.getRequestResultAdjustmentByReqId(request.id)
          .then(() => this.apiData = data);
      }
    }

  }
});

另外，请注意，mounted 应该是一个普通的旧 JS 函数，而不是 async 函数。这就是组件的生命周期方法应该以特定方式运行。

【讨论】：