Category: JavaScript

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.

Sometimes, we want to use $watch on an array of objects with Vue.js.

In this article, we’ll look at how to use $watch on an array of objects with Vue.js.

How to use $watch on an array of objects with Vue.js?

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.

For instance, we write

<script>
//...
export default {
  //...
  watch: {
    things: {
      handler(val, oldVal) {
        //...
      },
      deep: true,
    },
  },
  //...
};
</script>

to watch the things array reactive property for changes.

We set the deep option to true to watch all nested content in the array for changes.

And then we get the latest value for things in val and the previous value of it with oldVal.

Conclusion

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.

Sometimes, we want to add a Google Font to a Vue.js component.

In this article, we’ll look at how to add a Google Font to a Vue.js component.

How to add a Google Font to a Vue.js component?

To add a Google Font to a Vue.js component, we can imnport it in our CSS.

For instance, we write

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

html,
body {
  font-family: "Roboto", sans-serif;
}

#app {
  font-family: "Roboto", sans-serif;
}

in the style tag of a component to import the Roboto font with

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

Then we can set the font-family to Roboto in the elements we want.

Conclusion

To add a Google Font to a Vue.js component, we can imnport it in our CSS.