Author: John Au-Yeung

Sometimes, we want to reverse the order of an array using v-for in Vue.js.

In this article, we’ll look at how to reverse the order of an array using v-for in Vue.js.

Reverse the Order of an Array Using v-for in Vue.js

We can reverse the order of an array using v-for in Vue.js by using the slice and reverse array methods to copy the original array and then reverse it.

For instance, we can write:

<template>
  <div id="app">
    <p v-for="item in items.slice().reverse()" :key="item.id">
      {{ item.message }}
    </p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { id: 51, message: "first" },
        { id: 265, message: "second" },
        { id: 32, message: "third" },
      ],
    };
  },
};
</script>

We call item.slice to make a copy of the array and return it.

Then we call reverse to reverse the copied array.

Then we use v-for to render the array items.

Now we see:

third

second

first

as a result.

Conclusion

We can reverse the order of an array using v-for in Vue.js by using the slice and reverse array methods to copy the original array and then reverse it.

Sometimes, we want to watch a deeply nested object with Vue.js.

In this article, we’ll look at how to watch a deeply nested object with Vue.js.

Watch a Deeply Nested Object with Vue.js

To watch a deeply nested object with Vue.js, we can add a watcher for the nested property.

To do this, we write:

<template>  
  <div id="app">  
    <input type="checkbox" v-model="block.checkbox.active" />  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      block: {  
        checkbox: {  
          active: false,  
        },  
        someOtherProp: {  
          changeme: 0,  
        },  
      },  
    };  
  },  
  watch: {  
    "block.checkbox.active": {  
      immediate: true,  
      handler(val) {  
        console.log(val);  
      },  
    },  
  },  
};  
</script>

We have the block reactive property.

And we want to watch for changes to the block.checkbox.active property.

To do that, we add the 'block.checkbox.active' watcher object.

We set immediate to true to watch the initial value.

And we have the handler method that has the val parameter that has the current value of block.checkbox.active .

We set v-model to block.checkbox.active to bind the checkbox value to the block.checkbox.active property.

Conclusion

To watch a deeply nested object with Vue.js, we can add a watcher for the nested property.

Sometimes, we want to watch for checkbox clicks in Vue.js.

In this article, we’ll look at how to watch for checkbox clicks in Vue.js.

Watch Checkbox Clicks in Vue.js

To watch for checkbox clicks in Vue.js, we can listen to the change event.

For instance, we can write:

<template>  
  <div id="app">  
    <input type="checkbox" v-model="selected" @change="check($event)" />  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      selected: true,  
    };  
  },  
  methods: {  
    check(e) {  
      console.log(e.target.checked, this.selected);  
    },  
  },  
};  
</script>

to add the @change directive to the checkbox input to listen to the change event.

Then we can get the checked value of the checkbox with e.target.checked or the this.selected reactive property.

We can use this.selected since we bind the checked value of the checkbox to the this.selected reactive property with the v-model directive.

Conclusion

To watch for checkbox clicks in Vue.js, we can listen to the change event.

Sometimes, we want to set the selected option of a select dropdown in Vue.js.

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

Set the Selected Option of a Select Drop Down in Vue.js

We can set the selected option of a selected drop with the v-model directive.

For instance, we can write:

<template>  
  <div id="app">  
    <select v-model="selected">  
      <option :value="1">apple</option>  
      <option :value="2">orange</option>  
      <option :value="3">grape</option>  
    </select>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      selected: 2,  
    };  
  },  
};  
</script>

We have the selected reactive property and set its value to 2.

Then in the template, we have the select element with the v-model directive to bind the selected value to the selected reactive property.

We have the value prop which sets the value of each option.

Since we set selected to 2, the ‘orange’ option should be selected initially since the value prop value matched the value of selected .

Conclusion

We can set the selected option of a selected drop with the v-model directive.

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

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

Watch Multiple Properties with a Single Handler in Vue.js

We can watch multiple properties with a single handler in Vue.js with the this.$watch method.

For instance, we can write:

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      name: "jane",
      surname: "smith",
    };
  },
  mounted() {
    this.$watch(
      (vm) => [vm.name, vm.surname],
      (val) => {
        const fullName = this.name + " " + this.surname;
        console.log(fullName);
      },
      {
        immediate: true,
        deep: true,
      }
    );
  },
};
</script>

We name the name and surname reactive properties which we want to watch the values for.

And we do that by calling this.$watcg in the mounted hook with a function that returns an array with the reactive properties we want to watch.

vm is the component instance.

We get the values in function in the 2nd argument and we do what we want to it.

The 3rd argument is an object with some options.

immediate set to true means we watch the initial value of the reactive properties.

deep set to true means we watch for changes of properties in all levels of an object.

Conclusion

We can watch multiple properties with a single handler in Vue.js with the this.$watch method.