Category: Vue

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.

Sometimes, we want to fix Vue.js dynamic images not working.

In this article, we’ll look at how to fix Vue.js dynamic images not working.

How to fix Vue.js dynamic images not working?

To fix Vue.js dynamic images not working, we can use the require function in the template.

For instance, we write

<img :src="require(`@/assets/${name}.png`)" alt class="icon" />

to set the src prop to require(@/assets/${name}.png).

We call require with the absolute image path of the image.

And @/ is the shorthand for the src directory of the Vue project.

Conclusion

To fix Vue.js dynamic images not working, we can use the require function in the template.

Sometimes, we want to add external JavaScript scripts to Vue.js components.

In this article, we’ll look at how to add external JavaScript scripts to Vue.js components.

How to add external JavaScript scripts to Vue.js components?

To add external JavaScript scripts to Vue.js components, we can add a script element with document.createElement.

For instance, we write

export default {
  //...
  mounted() {
    const recaptchaScript = document.createElement("script");
    recaptchaScript.setAttribute(
      "src",
      "https://www.google.com/recaptcha/api.js"
    );
    document.head.appendChild(recaptchaScript);
  },
  //...
};

to call document.createElement with 'script' to create a script element.

And then we call setAttribute to set the src property of it to the script’s URL.

Finally, we call document.head.appendChild to append the script to the head element as its child.

Conclusion

To add external JavaScript scripts to Vue.js components, we can add a script element with document.createElement.

Sometimes, we want to fix "this" being undefined with Vue.js.

In this article, we’ll look at how to fix "this" being undefined with Vue.js.

How to fix "this" being undefined with Vue.js?

To fix "this" being undefined with Vue.js, we should use regular functions for hooks, computed properties, and methods.

For instance, we write

export default {
  //...
  mounted() {
    console.log(this);
  },
  //...
};

to add the mounted hook by setting mounted to a regular function.

As a result, this will refer to the current Vue component instance instead of undefined.

Conclusion

To fix "this" being undefined with Vue.js, we should use regular functions for hooks, computed properties, and methods.