[Vuejs]-Vue make const inside method available in template

by

0👍

✅

You need to add the response data to Vue’s reactivity system. The idiomatic way to this is to set some property on the instance that has been set using the returned object from the data factory.

export default {
  data() {
    return {
      role: null,
    };
  },
};

role can now be used reactively, i.e. {{ role.name }} in templates or in computed properties. You can use some conditional logic to only show role when it is truthy.

Once you have sent the request and received the response you can simply do:

this.role = data.filter((obj) => obj.id === id).pop();

And the reactivity system will take care of the rest.

Leave a comment