Category: Vue Answers

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.

Sometimes, we want to get left, top position of element? in Vue.js

In this article, we’ll look at how to get left, top position of element? in Vue.js

How to get left, top position of element in Vue.js?

To get left, top position of element? in Vue.js, we can call the getBoundClientRect method.

For instance, we write

<template>
  <a ref="busstop" href="#" @click="getPos"> ... </a>
</template>

<script>
//...
export default {
  //...
  methods: {
    getPos(event) {
      const { left, top } = this.$refs.busstop.getBoundingClientRect();
      //...
    },
  },
  //...
};
</script>

to call getPos when we click on the link.

We assigned the busStop ref to the link.

So, we can call this.$refs.busStop.getBoundingClientRect to get an object with the position of the element.

We get the left position with left, top position with top, right position with right, and bottom position with bottom.

Conclusion

To get left, top position of element? in Vue.js, we can call the getBoundClientRect method.