Category: Vue Answers

Sometimes, we want to get window size whenever it changes with Vue.js.

In this article, we’ll look at how to get window size whenever it changes with Vue.js.

How to get window size whenever it changes with Vue.js?

To get window size whenever it changes with Vue.js, we can call window.addEventListener to add a resize event listener.

For instance, we write

<script>
//...
export default {
  //...
  created() {
    window.addEventListener("resize", this.onResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize(e) {
      this.size = window.innerWidth;
    },
  },
  //...
};
</script>

to call window.addEventListener with 'resize' to listen to the resize event in the created hook to add it before we mount the component.

The resize event is triggered when we change the window size.

We set the event handler to onResize.

In the destroyed hook, we call window.removeEventListener to remove the resize event listener.

In it, we get the window width with window.innerWidth and height with window.innerHeight.

Conclusion

To get window size whenever it changes with Vue.js, we can call window.addEventListener to add a resize event listener.

Sometimes, we want to set add the selected attribute to an drop down option in Vue.js.

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

How to set add the selected attribute to an drop down option in Vue.js?

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

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" :key="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

to add the selected to the first option by writing

<option selected>Choose Province</option>

just like in regular HTML.

Conclusion

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

Sometimes, we want to watch multiple properties with single handler with Vue.js.

In this article, we’ll look at how to watch multiple properties with single handler with Vue.js.

How to watch multiple properties with single handler with Vue.js?

To watch multiple properties with single handler with Vue.js, we can use the this.$watch method.

For instance, we write

<script>
//...
export default {
  //...
  data() {
    return {
      name: "Alice",
      lastName: "Smith",
      fullName: "",
    };
  },
  mounted() {
    this.$watch(
      (vm) => [vm.name, vm.lastName],
      (val) => {
        this.fullName = `${this.name} ${this.lastName}`;
      },
      {
        immediate: true,
        deep: true,
      }
    );
  },
  //...
};
</script>

to call this.$watch with a function that returns the reactive properties we want to watch, a function that runs when any of the reactive properties change, and an object with some options.

We return an array of reactive properties we want to watch with

(vm) => [vm.name, vm.lastName]

And we so something with the values of the reactive properties when any of them change with

(val) => {
  this.fullName = `${this.name} ${this.lastName}`;
};

We set immediate to true to start watching the reactive properties when the component mounts.

And we set deep to true to watch all nested properties of each reactive property for changes.

Conclusion

To watch multiple properties with single handler with Vue.js, we can use the this.$watch method.

Sometimes, we want to access data from methods with Vue.js.

In this article, we’ll look at how to access data from methods with Vue.js.

How to access data from methods with Vue.js?

To access data from methods with Vue.js, we can get them from this.

For instance, we write

<script>
//...
export default {
  //...
  data() {
    return {
      sendButtonDisable: false,
    };
  },

  methods: {
    postQuestionsContent() {
      this.sendButtonDisable = true;
    },
  },
  //...
};
</script>

to add the postQuestionsContent method.

In it, we set the sendButtonDisable reactive property to true.

We can get the value of this.sendButtonDisable with this.sendButtonDisable

Conclusion

To access data from methods with Vue.js, we can get them from this.

Sometimes, we want to pass the selected drop down value to a Vue.js function.

In this article, we’ll look at how to pass the selected drop down value to a Vue.js function.

How to pass the selected drop down value to a Vue.js function?

To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.

For instance, we write

<template>
  <div id="app">
    <select name="test" v-model="sorting" @change="sortBy">
      <option value="title asc">Title (A-Z)</option>
      <option value="title desc">Title (Z-A)</option>
      <option value="price asc">Price (Min. - Max.)</option>
      <option value="price desc">Price (Max. - Min.)</option>
    </select>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      sorting: null,
    };
  },
  methods: {
    sortBy() {
      console.log(this.sorting);
    },
  },
  //...
};
</script>

to add a select drop down and we bind the drop down’s selected value to the sorting reactive property with v-model.

And then we listen to the change event and run the sortBy method when it’s triggered with

@change="sortBy"

And then we log the latest value of this.sorting inside the method.

Conclusion

To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.