Category: Vue

Sometimes, we want to check if you are on the last property of an object in a v-for loop with Vue.js.

In this article, we’ll look at how to check if you are on the last property of an object in a v-for loop with Vue.js.

How to check if you are on the last property of an object in a v-for loop with Vue.js?

To check if you are on the last property of an object in a v-for loop with Vue.js, we can use the index and the Object.keys method.

For instance we write

<template>
  <div>
    <span v-for="(val, key, index) of person" :key="key">
      key: {{ key }}, val: {{ val }}, index: {{ index }}
      <span v-if="index !== Object.keys(person).length - 1">, </span>
    </span>
  </div>
</template>

to get the index of the property being looped through in the person object.

And we check if we aren’t on the last property of person with

index !== Object.keys(person).length - 1

We use to Object.keys return an array of property keys in the person object and we get the length of that to get the number of properties in the object.

Conclusion

To check if you are on the last property of an object in a v-for loop with Vue.js, we can use the index and the Object.keys method.

Sometimes, we want to access an externally imported method in a Vue.js component.

In this article, we’ll look at how to access an externally imported method in a Vue.js component.

How to access an externally imported method in a Vue.js component?

To access an externally imported method in a Vue.js component, we can use a mixin.

For instance, we write

<template>
  <div>
    <button type="button" name="button" @click="myFunc">
      Call External JS
    </button>

    ...
  </div>
</template>

<script>
import somethingMixin from "@/mixins/somethingMixin";

//...
export default {
  //...
  mixins: [somethingMixin],
  mounted() {
    this.myFunc();
  },
  //...
};
</script>

to incorporate the myFunc method from somethingMixin into our component.

We register the mixin in our component with

mixins: [somethingMixin]

Then we call this.myFunc in the mounted hook and also call myFunc when we click the button.

Conclusion

To access an externally imported method in a Vue.js component, we can use a mixin.

Sometimes, we want to apply classes to Vue.js functional component from parent component.

In this article, we’ll look at how to apply classes to Vue.js functional component from parent component.

How to apply classes to Vue.js functional component from parent component?

To apply classes to Vue.js functional component from parent component, we can get the reactive property data from data.

For instance, we write

<template functional>
  <div :class="data.staticClass || ''" v-bind="data.attrs">...</div>
</template>

to get the class name from the data.staticClass property.

And then we set that as the value of :class to set that as the class name dynamically.

Conclusion

To apply classes to Vue.js functional component from parent component, we can get the reactive property data from data.

Sometimes, we want to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js.

In this article, we’ll look at how to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js.

How to fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js?

To fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js, we should use a primitive value as the value of the key prop when we’re using v-for.

For instance, we write

<template>
  <div>
    ...
    <div v-for="comment in comments" :key="comment.id">...</div>
    ...
  </div>
</template>

to set the key prop to comment.id where comment.id is a unique ID string of each comments entry.

The key prop’s value helps Vue identify each item being rendered with v-for.

Conclusion

To fix the ‘Avoid using non-primitive value as key, use string/number value instead’ with Vue.js, we should use a primitive value as the value of the key prop when we’re using v-for.

Sometimes, we want to reverse the order of an array using v-for and orderBy filter in Vue.js.

In this article, we’ll look at how to reverse the order of an array using v-for and orderBy filter in Vue.js.

How to reverse the order of an array using v-for and orderBy filter in Vue.js?

The order of an array using v-for and orderBy filter in Vue.js, we can call the reverse method on the array.

For instance, we write

<template>
  <div>
    ...
    <li v-for="item in items.slice().reverse()">...</li>
    ...
  </div>
</template>

to make a copy of the items array with slice and then call reverse to reverse the cloned array.

And then we use v-for to render the items in the reversed array.

Conclusion

The order of an array using v-for and orderBy filter in Vue.js, we can call the reverse method on the array.