Category: Vue Answers

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.

Sometimes, we want to make a component delete itself in Vue.js.

In this article, we’ll look at how to make a component delete itself in Vue.js.

How to make a component delete itself in Vue.js?

To make a component delete itself in Vue.js, we can use the this.$destroy method.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    close() {
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    },
  },
  //...
};
</script>

to add the close method to call this.$destroy to unmount the component.

And then we call this.$el.parentNode.removeChild(this.$el) to remove the current component’s root element from the DOM.

Conclusion

To make a component delete itself in Vue.js, we can use the this.$destroy method.