Category: JavaScript

Sometimes, we want to set default value of an array prop in Vue.js.

In this article, we’ll look at how to set default value of an array prop in Vue.js.

How to set default value of an array prop in Vue.js?

To set default value of an array prop in Vue.js, we can set the default property to a function that returns the default array value.

For instance, we write

<script>
//...
export default {
  //...
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  //...
};
</script>

to set the default value of the items prop to an empty array by adding the default property and setting that to a function that returns the empty array.

Conclusion

To set default value of an array prop in Vue.js, we can set the default property to a function that returns the default array value.

Sometimes, we want to add async computed properties in Vue.js components.

In this article, we’ll look at how to add async computed properties in Vue.js components.

How to add async computed properties in Vue.js components?

To add async computed properties in Vue.js components, we should move out async code into methods and then put the synchronous code in the computed property method.

For instance, we write

<script>
//...
export default {
  //...
  computed: {
    sortedMessages() {
      return this.messages.sort((a, b) => {
        //...
      });
    },
  },
  data() {
    return {
      //...
      messages: [],
    };
  },
  async mounted() {
    const response = await api.get(`/users/${this.value.username}/message/`, {
      headers: {
        Authorization: "...",
      },
    });
    this.messages = response.data;
  },
  //...
};
</script>

to call the api.get method in the mounted hook.

Then we set the response.data returned by the returned promise to the this.messages reactive property.

And then we use the this.messages reactive property to create the sortedMessages computed property.

Conclusion

To add async computed properties in Vue.js components, we should move out async code into methods and then put the synchronous code in the computed property method.

Sometimes, we want to fix the ‘Uncaught (in promise) TypeError: Cannot set property ‘message’ of undefined’ in Vue.js.

In this article, we’ll look at how to fix the ‘Uncaught (in promise) TypeError: Cannot set property ‘message’ of undefined’ in Vue.js.

How to fix the ‘Uncaught (in promise) TypeError: Cannot set property ‘message’ of undefined’ in Vue.js?

To fix the ‘Uncaught (in promise) TypeError: Cannot set property ‘message’ of undefined’ in Vue.js, we should make sure we aren’t referencing properties of undefined values in our methods.

For instance, we write

<script>
//...
export default {
  //...
  async loadData() {
    const response = await this.$http.get("/notifications");
    this.message = response.data;
    console.log(this.message);
  },
  //...
};
</script>

to add the loadData method which references the response.data property.

To avoid the error, we should make sure that response is an object before referencing response.data.

To do this, we can replace the . with the optional chaining operator by writing

response?.data

instead of response.data.

Conclusion

To fix the ‘Uncaught (in promise) TypeError: Cannot set property ‘message’ of undefined’ in Vue.js, we should make sure we aren’t referencing properties of undefined values in our methods.

Sometimes, we want to preload images using Vue.js.

In this article, we’ll look at how to preload images using Vue.js.

How to preload images using Vue.js?

To preload images using Vue.js, we can set the rel attribute of the img element to preload.

For instance, we write

<template>
  <div>
    <img :src="images.secondScreenShot" rel="preload" />
  </div>
</template>

to set the rel attribute to preload to preload the image.

Conclusion

To preload images using Vue.js, we can set the rel attribute of the img element to preload.

Sometimes, we want to handle Bootstrap modal hide event in Vue.js.

In this article, we’ll look at how to handle Bootstrap modal hide event in Vue.js.

How to handle Bootstrap modal hide event in Vue.js?

To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.

Then we can pass the ref into the jQuery $ function and call on on it.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    doSomethingOnHidden() {
      //...
    },
  },
  mounted() {
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden);
  },
  //...
};
</script>

to get the modal element with this.$refs.vuemodal.

Then we pass that into $ to return a jQuery object for the element.

And then we call on with the 'hidden.bs.modal' event and set the event handler of that to the this.doSomethingOnHidden method.

Conclusion

To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.

Then we can pass the ref into the jQuery $ function and call on on it.