Category: Vue Answers

Sometimes, we want to render a filtered list of array elements in our Vue component.

In this article, we’ll look at how to render a filtered list of array elements in our Vue component.

Filtering Lists in Vue Components

The proper way to filter lists is to use a computed property.

This is because computed properties return a value before v-for is run.

For instance, we can write:

computed: {
  filteredItems() {
    return this.items.filter(item => item.type.toLowerCase().includes(this.search.toLowerCase()))
  }
}

We put our filtering logic in the filterItems computed properties.

Then we can loop through the computed properties by writing:

<div v-for="item of filteredItems" >
  <p>{{item.name}}</p>
</div>

We just pass in the filteredItems computed property as a variable into our template.

Conclusion

The proper way to filter lists is to use a computed property.

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.