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

One thing you may notice if you were to output the filterUserState variable is it

appears to be in working, But, it is not getting the actual results desired. The output of the

variable would be true and falseas set in the value attributes.

On closer inspection, the values are actually strings, rather than a Boolean value. A Boolean

value is a hard true or false, 1 or 0 , which you can easily compare against, whereas a

string would require exact checking on a hardcoded string. This can be verified by

outputting the typeof variable that it is:

{{ typeof filterUserState }}

This can be resolved by binding the values of the radio buttons with the v-

bind:value attribute. This attribute allows you to specify the value for Vue to interpret

and can take Boolean, string, or object values. For now, we'll pass it true and false, as we

were already doing with the standard value attribute, but Vue will know to interpret it as
Boolean:

<span>

Active:

<label for="userStateActive">

Yes:

<input type="radio" v-bind:value="true" id="userStateActive"

v-model="filterUserState" selected>

</label>

<label for="userStateInactive">

No:

<input type="radio" v-bind:value="false"

id="userStateInactive" v-model="filterUserState">

</label>

</span>

The next step is to show and hide the table rows based on these filters.

Showing and hiding Vue content

Along with v-if for showing and hiding content, you can also use the v-show=""

directive. v-show is very similar to v-if; they both get added to the HTML wrapper and

can both accept the same parameters, including a function.