Category: Vue Answers

Sometimes, we want to use multiple condition in v-if in Vue.js.

In this article, we’ll look at how to use multiple condition in v-if in Vue.js.

How to use multiple condition in v-if in Vue.js?

To use multiple condition in v-if in Vue.js, we can add them all into v-if.

For instance, we write

<template>
  <div>
    <div v-if="item.fullName !== null && item.fullName !== ''"></div>
  </div>
</template>

to check if item.fullName isn’t null or an empty string with item.fullName !== null && item.fullName !== ''.

If both conditions return true, then we render the div.

Conclusion

To use multiple condition in v-if in Vue.js, we can add them all into v-if.

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.