Category: Vue

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.

Sometimes, we want to fix keyup, keydown events is one character behind actual input value with Vue.js

In this article, we’ll look at how to fix keyup, keydown events is one character behind actual input value with Vue.js

How to fix keyup, keydown events one character behind with Vue.js?

To fix keyup, keydown events is one character behind actual input value with Vue.js, we can call this.$nextTick before getting the v-model value.

For instance, we write

<template>
  <input
    type="text"
    v-model="keywords"
    @keyup.enter="queryForKeywords"
    @keydown="queryForKeywords"
  />
</template>

<script>
//...
export default {
  //...
  data() {
    return { keywords: "" };
  },
  methods: {
    async queryForKeywords(event) {
      await this.$nextTick();
      if (this.keywords.length > 2) {
        console.log(this.keywords);
      }
    },
  },
  //...
};
</script>

to call the queryForKeywords method when the keyup or keydown events are triggered.

In it, we call this.$nextTick before we get the this.keywords value to get the latest value.

this.$nextTick delays the function until the re-rendering is done before running the code below it.

Conclusion

To fix keyup, keydown events is one character behind actual input value with Vue.js, we can call this.$nextTick before getting the v-model value.