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

(singke) #1
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;
}
Free download pdf