Question

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

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

在组件中，我可以这样做：

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

它的工作原理是显示“ id”的值。

在组件的道具部分：

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

我不确定为什么。

Answer 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函数。这就是应该以特定方式运行的组件的生命周期方法。

在刷新功能中

1 个答案: