Category: Vue Answers

Sometimes, we want to update an array with Vue.js and Vue.set()

In this article, we’ll look at how to update an array with Vue.js and Vue.set().

How to update an array with Vue.js and Vue.set()?

To update an array with Vue.js and Vue.set(), we call Vue.set or this.$set with the array we want to update, the index of the array item we want to update, and the item we replace the existing item at the index with.

For instance, we write

new Vue({
  el: "#app",
  data: {
    items: ["10-03-2017", "12-03-2017"],
  },
  methods: {
    update() {
      this.$set(items, 1, "12-03-2022");
    },
  },
});

to call this.$set with the items array, index 1, and "12-03-2022" to update the 2nd items entry to "12-03-2022".

This change will be picked up by Vue, so re-rendering will happen.

We use Vue.set the same as this.$set.

Conclusion

To update an array with Vue.js and Vue.set(), we call Vue.set or this.$set with the array we want to update, the index of the array item we want to update, and the item we replace the existing item at the index with.

Sometimes, we want to watch for nested data with Vue.js.

In this article, we’ll look at how to watch for nested data with Vue.js.

How to watch for nested data with Vue.js?

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.

For instance, we write

<script>
export default {
  watch: {
    item: {
      handler(val) {
        // ...
      },
      deep: true,
    },
  },
};
</script>

to add a watcher for the item reactive property.

We set the deep property to true to watch for changes in all nested properties of item.

Therefore, handler runs whenever the content of item changes.

Conclusion

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.

Sometimes, we want to return promises from Vuex actions.

In this article, we’ll look at how to return promises from Vuex actions.

How to return promises from Vuex actions?

To return promises from Vuex actions, we can add async functions into the actions property.

For instance, we write

const store = {
  //...
  actions: {
    async getUser({ commit }) {
      try {
        const currentUser = await axios.get("/user/current");
        commit("setUser", currentUser);
        return currentUser;
      } catch (err) {
        commit("setUser", null);
        throw "Unable to fetch current user";
      }
    },
    //...
  },
};

to add the getUser actuion method that makes a GET request with axios.get.

And we return the a promise with the response data by returning currentUser.

Also, we call commit to commit the setUser mutation.

Conclusion

To return promises from Vuex actions, we can add async functions into the actions property.

Sometimes, we want to detect click outside element with Vue.js.

In this article, we’ll look at how to detect click outside element with Vue.js.

How to detect click outside element with Vue.js?

To detect click outside element with Vue.js, we can add a directive to detect the clicks.

For instance, we write

Vue.directive("click-outside", {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = (event) => {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    document.body.removeEventListener("click", el.clickOutsideEvent);
  },
});

to call Vue.directive to create the click-outside directive.

In the bind method, we check if the click is outside an element with !(el == event.target || el.contains(event.target)).

And if it’s outside, we call the event handler we set as the value of the directive with vnode.context[binding.expression](event).

We listen for clicks by calling document.body.addEventListener with 'click'.

And we unbind the event listener with document.body.removeEventListener.

Conclusion

To detect click outside element with Vue.js, we can add a directive to detect the clicks.

Sometimes, we want to communicate between sibling components in Vue.js.

In this article, we’ll look at how to communicate between sibling components in Vue.js.

How to communicate between sibling components in Vue.js?

To communicate between sibling components in Vue.js, we can emit event to the root component of the app with this.$root.$emit.

For instance, we write

this.$root.$emit('event', data);

to emit the event event from the first component.

Then in the 2nd component, we write

<script>
export default {
  //...
  mounted() {
    this.$root.$on("event", (data) => {
      console.log(data);
    });
  },
  //...
};
</script>

to call this.$root.$on to listen for the 'event' event and get the data that we called $emit with from the callback parameter.

Conclusion

To communicate between sibling components in Vue.js, we can emit event to the root component of the app with this.$root.$emit.