[Vuejs]-The prop object's property is undefined in refresh function

by

0👍

✅

If the request property is asynchronously available to the component then, you have to use combination of watchers like:

// 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);
      }
    }

  }
});

Also, note that, mounted should be a plain old JS function and not an async function. That’s the lifecycle method of the component supposed to behave in particular way.

Leave a comment