Category: Vue Answers

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.

Sometimes, we want to fix Vue.js computed properties not working with arrow functions.

In this article, we’ll look at how to fix Vue.js computed properties not working with arrow functions.

How to fix Vue.js computed properties not working with arrow functions?

To fix Vue.js computed properties not working with arrow functions, we should replace arrow functions with regular functions so that this is set to the Vue component.

For instance, we write

export default {
  //...
  computed: {
    switchRYellow() {
      return { red: this.turnYellow };
    },
    switchGreen() {
      return { green: this.turnGreen };
    },
    switchBlue() {
      return { blue: this.turnBlue };
    },
  },
  //...
};

to add the switchRYellow, switchGreen and switchBlue computed properties to regular functions.

Then we use properties from this where this is the current Vue component instance.

this.turnYellow, this.turnGreen and this.turnBlue are reactive properties.

Conclusion

To fix Vue.js computed properties not working with arrow functions, we should replace arrow functions with regular functions so that this is set to the Vue component.