Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Displaying, Looping, Searching, and Filtering Data Chapter 2

The difference between the two is v-if alters the markup, removing and adding HTML

elements as required, whereas v-show renders the element regardless, hiding and showing

the element with inline CSS styles. v-if is much more suited to runtime renders or

infrequent user interactivities as it could potentially be restructuring the whole page. v-

show is favorable when lots of elements are quickly coming in and out of view, for

example, when filtering!

When using v-show with a method, the function needs to return just a true or false. The

function has no concept of where it is being used, so we need to pass in the current person

being rendered to calculate if it should be shown.

Create a method on your Vue instance titled filterRow() and inside, set it to return

true:

filterRow(person) {

return true;

}

The function takes one parameter, which is the person will we pass in from though from
the HTML. In your view, add the v-show attribute to the element with filterRow as

the value while passing in the person object:

<table>

<tr v-for="person in people" v-show="filterRow(person)">

<td>{{ person.name }}</td>

...

As a simple test, return the isActive value to the person. This should instantly filter out

anyone who is inactive, as their value will return false:

filterRow(person) {

return person.isActive;

}