Category: JavaScript

Sometimes, we want to trigger event after component has been rendered in Vue.js.

In this article, we’ll look at how to trigger event after component has been rendered in Vue.js.

How to trigger event after component has been rendered in Vue.js?

To trigger event after component has been rendered in Vue.js, we can call this.$emit in the mounted hook.

For instance, we write

<script>
export default {
  //...
  mounted() {
    this.$emit("loaded");
  },
  //...
};
</script>

to emit the loaded event in the mounted hook with this.$emit.

Conclusion

To trigger event after component has been rendered in Vue.js, we can call this.$emit in the mounted hook.

Sometimes, we want to add switch statement with Vue.js templates.

In this article, we’ll look at how to add switch statement with Vue.js templates.

How to add switch statement with Vue.js templates?

To add switch statement with Vue.js templates, we should put the switch statement in a computed property.

For instance, we write

<template>
  <div>
    <button>
      {{ btnText }}
    </button>
  </div>
</template>

<script>
export default {
  //...
  computed: {
    btnText() {
      switch (this.item.delta) {
        default:
          return "Nothing";
        case 0:
          return "Buy";
        case 1:
          return "Sell";
      }
    },
  },
  //...
};
</script>

to add the btnText computed property that checks the this.item.delta value with a switch statement.

We return 'Nothing' by default, 'Buy' if this.item.delta is 0, or 'Sell' if this.item.delta is 1.

Then we render btnText in the button as its text.

Conclusion

To add switch statement with Vue.js templates, we should put the switch statement in a computed property.

Sometimes, we want to push items into an array in the data object in Vue.js.

In this article, we’ll look at how to push items into an array in the data object in Vue.js.

How to push items into an array in the data object in Vue.js?

To push items into an array in the data object in Vue.js, we can make a copy of the object to append to the array before we call push with it.

For instance, we write

<script>
export default {
  //...
  data() {
    return {
      queue: [],
      purchase: {
        product: null,
        customer: null,
        quantity: null,
      },
    };
  },
  methods: {
    queuePurchase() {
      this.queue.push({ ...this.purchase });
    },
    //...
  },
  //...
};
</script>

to call this.queue.push with the copy of the this.purchase object.

Making a copy of the object will mean that only the original this.purchase object when we change the properties in it rather than this.purchase and the item in the this.queue array.

Conclusion

To push items into an array in the data object in Vue.js, we can make a copy of the object to append to the array before we call push with it.

Sometimes, we want to get the element that is being called by an event with Vue.js

In this article, we’ll look at how to get the element that is being called by an event with Vue.js.

How to get the element that is being called by an event with Vue.js?

To get the element that is being called by an event with Vue.js, we can use the e.target property in the event handler.

For instance, we write

<template>
  <div>
    ...
    <li @click="onClick">Trigger a handler</li>
    ...
  </div>
</template>

<script>
export default {
  methods: {
    onClick(e) {
      const clickedElement = e.target;
    },
  },
};
</script>

to set the click event handler to onClick with @click="onClick".

Then we get the element that’s clicked in onClick with the e.target property.

e is the event object that’s set when we click on the element.

Conclusion

To get the element that is being called by an event with Vue.js, we can use the e.target property in the event handler.

Sometimes, we want to reload a Vue.js component.

In this article, we’ll look at how to reload a Vue.js component.

How to reload a Vue.js component?

To reload a Vue.js component, we can set the key prop to a different value than the original.

For instance, we write

<template>
  <component-to-re-render :key="componentKey" />
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    },
  },
};
</script>

to add the forceRerender method that updates the value of the this.componentKey reactive property.

Once it’s updated, then component-to-re-render component will re-render after calling forceRerender since we set the key prop to componentKey.

Conclusion

To reload a Vue.js component, we can set the key prop to a different value than the original.