Category: JavaScript

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.

Sometimes, we want to handle click and dblclick events on same element with Vue.js.

In this article, we’ll look at how to handle click and dblclick events on same element with Vue.js.

How to handle click and dblclick events on same element with Vue.js?

To handle click and dblclick events on same element with Vue.js, we just use the click handler and watch for a second in there.

For instance, we write

<template>
  <ul class="data_row" v-for="(row, index) in gridData" @click="oneClick">
    ...
  </ul>
</template>

<script>
//...
export default {
  //...
  methods: {
    oneClick(event) {
      this.clicks++;
      if (this.clicks === 1) {
        this.timer = setTimeout(() => {
          this.result.push(event.type);
          this.clicks = 0;
        }, this.delay);
      } else {
        clearTimeout(this.timer);
        this.result.push("dblclick");
        this.clicks = 0;
      }
    },
  },
  //...
};
</script>

to watch for clicks with the oneClick method.

In it, we track the number of clicks with the this.clicks reactive property.

If we detected one click by checking that this.clicks === 1, then we call setTimeout to start a timer to push the event.type in this.delay milliseconds and reset this.clicks to 0.

Otherwise, we call clearTimeout to clwar the timer and push 'dblclick' since there’re 2 clicks done in a short amount of time.

And then we reset this.clicks to 0.

Conclusion

To handle click and dblclick events on same element with Vue.js, we just use the click handler and watch for a second in there.

Sometimes, we want to check a project’s Vue.js version.

In this article, we’ll look at how to check a project’s Vue.js version.

How to check a project’s Vue.js version?

To check a project’s Vue.js version, we can log the Vue.js version number with several methods.

One way is to use the Vue.version property, which we get by writing

import Vue from "vue";

console.log(Vue.version);

in our code.

Another way is to run

npm v vue

or

npm list vue

from the command line in our project folder to find the Vue version.

Conclusion

To check a project’s Vue.js version, we can log the Vue.js version number with several methods.

Sometimes, we want to watch click events from a checkbox with Vue.js.

In this article, we’ll look at how to watch click events from a checkbox with Vue.js.

How to watch click events from a checkbox with Vue.js?

To watch click events from a checkbox with Vue.js, we can watch the change event.

For instance, we write

<template>
  <input
    type="checkbox"
    :value="mainCat.merchantId"
    v-model="checkedCategories"
    @change="check"
  />
</template>

to watch the change event on the checkbox with @change="check".

Then check will run when we check or uncheck the checkbox.

Conclusion

To watch click events from a checkbox with Vue.js, we can watch the change event.