Category: JavaScript

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.

Sometimes, we want to update parent data from child component with Vue.js

In this article, we’ll look at how to update parent data from child component with Vue.js.

How to update parent data from child component with Vue.js?

To update parent data from child component with Vue.js, we should emit an event from the child component to the parent component.

For instance, we write

this.$emit("eventname", this.variable);

to call this.$emit with the event name and the variables we want to emit to the parent.

Then in the parent component, we write

<template>
  <child-component @eventname="updateParent"></child-component>
</template>

<script>
export default {
  //...
  methods: {
    updateParent(variable) {
      this.parentvariable = variable;
    },
  },
  //...
};
</script>

to add the child-component in our parent component’s template.

And we listen for the eventname event and call updateParent when the eventname event is emitted.

We get this.variable that we called this.$emit with from the variable parameter of updateParent.

Conclusion

To update parent data from child component with Vue.js, we should emit an event from the child component to the parent component.