Author: John Au-Yeung

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.

Sometimes, we want to use the custom filter prop in data tables in Vuetify.

In this article, we’ll look at how to use the custom filter prop in data tables in Vuetify.

How to use the custom filter prop in data tables in Vuetify?

To use the custom filter prop in data tables in Vuetify, we can return an array with the filtered items in a computed property.

For instance, we write

<template>
  <div>
    <v-data-table :headers="headers" :items="filteredItems" hide-actions>
    </v-data-table>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      food: [
        { name: "Bakchoi", type: "vegetable", calories: 100 },
        { name: "Pork", type: "meat", calories: 200 },
        { name: "Chicken Thigh", type: "meat", calories: 300 },
        { name: "Watermelon", type: "fruit", calories: 10 },
      ],
      headers: [
        { text: "Name", align: "left", value: "name" },
        { text: "Food Type", align: "left", value: "type" },
        { text: "Calories", align: "left", value: "calories" },
      ],
      foodType: null,
    };
  },
  computed: {
    filteredItems() {
      return this.food.filter((i) => {
        return !this.foodType || i.type === this.foodType;
      });
    },
  },
  //...
};
</script>

to add the food array that we filter to get the the filteredItems computed property.

And we use filteredItems as the data for the items prop in the v-data-table component.

Conclusion

To use the custom filter prop in data tables in Vuetify, we can return an array with the filtered items in a computed property.