Author: John Au-Yeung

Sometimes, we want to watch the change of an element value with Vue.js.

In this article, we’ll look at how to watch the change of an element value with Vue.js.

How to watch the change of an element value with Vue.js?

To watch the change of an element value with Vue.js, we can add a watcher.

For instance, we write

<script>
//...
export default {
  //...
  watch: {
    myValue(val, oldVal) {
      if (val < 50) {
        this.message = "value too low!";
      } else {
        this.message = "value is ok";
      }
    },
  },
  //...
};
</script>

to watch the myValue reactive property for changes.

We get its latest value from val and its previous value from oldVal.

And then we can do whatever we want in the watcher method according to the values.

Conclusion

To watch the change of an element value with Vue.js, we can add a watcher.

Sometimes, we want to change object in array and trigger reactivity with Vue.js

In this article, we’ll look at how to change object in array and trigger reactivity with Vue.js.

How to change object in array and trigger reactivity with Vue.js?

To change object in array and trigger reactivity with Vue.js, we can use the this.$set method.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    update(index) {
      this.$set(this.arr, index, { ...this.arr[index], foo: "bar" });
    },
  },
  //...
};
</script>

to call this.$set with the this.arr array we want to update, the index of the item we want to update, and the object we want to update the object at the index to.

Calling this.$set will trigger Vue.js to notice the changes in the object in the array that’s changed and re-render the component.

Conclusion

To change object in array and trigger reactivity with Vue.js, we can use the this.$set method.

Sometimes, we want to hide a div with Vue.js.

In this article, we’ll look at how to hide a div with Vue.js.

How to hide a div with Vue.js?

To hide a div with Vue.js, we can use the v-if directive.

For instance, we write

<template>
  <div>
    <div v-if="seen" id="hide">
      <p>hide me</p>
    </div>
  </div>
</template>

to show the div only if seen if true by adding v-if="seen" to the div.

Conclusion

To hide a div with Vue.js, we can use the v-if directive.

Sometimes, we want to access $route.params in Vue.js.

In this article, we’ll look at how to access $route.params in Vue.js.

How to access $route.params in Vue.js?

To access $route.params in Vue.js, we access it from this in the options API.

In the composition API, we use the useRoute hook.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    get() {
      console.log(this.$route.params.id);
    },
  },
  //...
};
</script>

to get the value of the id route parameter with this.$route.params.id with the options API.

With the composition API, we use the useRoute hook by writing

<script>
import { useRoute } from "vue-router";
//...
export default {
  //...
  setup() {
    const route = useRoute();
    const id = route.params.id;
  },
  //...
};
</script>

We call useRoute to return the route object and then we get the value of the id route parameter with route.params.id.

Conclusion

To access $route.params in Vue.js, we access it from this in the options API.

In the composition API, we use the useRoute hook.

Sometimes, we want to disable a button in Vue.js.

In this article, we’ll look at how to disable a button in Vue.js.

How to disable a button in Vue.js?

To disable a button in Vue.js, we set the disabled prop of the button.

For instance, we write

<template>
  <div>
    <button :disabled="isDisabled">Send Form</button>
  </div>
</template>

to set the disabled prop to the isDisabled reactive property.

Therefore, the disabled attribute will be added to the button only if isDisabled is true.

Conclusion

To disable a button in Vue.js, we set the disabled prop of the button.