Category: Vue Answers

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.

Sometimes, we want to upload image in Vue.js.

In this article, we’ll look at how to upload image in Vue.js.

How to upload image in Vue.js?

To upload image in Vue.js, we can add a file input, watch for file selection, and upload the file when a file is selected.

For instance, we write

<template>
  <input type="file" accept="image/*" @change="uploadImage" />
</template>

<script>
//...
export default {
  //...
  methods: {
    async uploadImage(event) {
      const URL = "http://foobar.com/upload";
      const data = new FormData();
      data.append("name", "my-picture");
      data.append("file", event.target.files[0]);
      const config = {
        header: {
          "Content-Type": "image/png",
        },
      };

      await axios.put(URL, data, config);
    },
  },
  //...
};
</script>

to set the change event handler to the uploadImage method on the file input.

In uploadImage, we put the image in the form data body with

data.append("file", event.target.files[0]);

And then we call axios.put to make a PUT request with the URL, form data data and the config for the request.

Conclusion

To upload image in Vue.js, we can add a file input, watch for file selection, and upload the file when a file is selected.

Sometimes, we want to set the selected option of a drop down in Vue.js.

In this article, we’ll look at how to set the selected option of a drop down in Vue.js.

How to set the selected option of a drop down in Vue.js?

To set the selected option of a drop down in Vue.js, we can add the selected attribute directly to the selected option.

For instance, we write

<template>
  <select v-model="selected" required @change="changeLocation">
    <option selected>Choose Province</option>
    <option v-for="option in options" :value="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

to add the selected attribute to the first option.

Conclusion

To set the selected option of a drop down in Vue.js, we can add the selected attribute directly to the selected option.