[Vuejs]-Vue.js : data is visible on console.log but not in DOM

by

0👍

You’re missing the return statement inside data function. The data option should always be a function in the context of components which returns a fresh object.

data(){
   return {
      placeToSearch: "",
      objPlaces: null,
   }
}

You can read more about it from the documentation: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

0👍

You may find it easier to use async/await rather than the callback functions.

const myObject = new Vue({
  el: "#app",
  data() {
    return {
      placeToSearch: "",
      objPlaces: null,
    }
  },
  methods: {
    async getPlaces() {
      const res = await axios.get('@Url.Action("GetPlace")', {
        params: { name: this.placeToSearch },
      });
      const places = res.data.results;

      this.objPlaces = places.map(async (el) => {
        const res = await axios.get('@Url.Action("GetPlaceDetails")', {
          params: { placeId: el.place_id },
        });
        el.website = res.data.results.website;
        return el;
      });
    },
  },
});

Note 1: I haven’t tested this, but the general idea is there.

Note 2: Missing try/catch to handle errors from the API.

Leave a comment