Vue.js 道具对象'；刷新函数中未定义s属性

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

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

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)
  }
},

安装在部件挂钩内：

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

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)
  }
},

在组件的刷新功能中：

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

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未定义

---

我不知道为什么。

如果组件异步使用

请求

属性，那么您必须使用如下观察程序组合：

// 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

函数。这是组件的生命周期方法，应该以特定的方式运行。

请求属性是从父组件传递的吗？我认为当子组件只是“挂载”时，属性还没有初始化或其他什么。是的。已从父组件传递请求属性。但是，如何让它工作呢？也许你可以为那处房产加上一块“手表”，然后从那里开始？