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

Query:

<input type="text" id="filterQuery" v-model="filterQuery">

</label>

<span v-show="isActiveFilterSelected()">

Active:

<label for="userStateActive">

Yes:

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

model="filterUserState">

</label>

<label for="userStateInactive">

No:

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

v-model="filterUserState">

</label>

</span>

</form>

<table>

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

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

<td>

<a v-bind:href="'mailto:' + person.email">{{ person.email }}

</a>

</td>

<td v-bind:class="balanceClass(person)">

{{ formatBalance(person.balance) }}

</td>

<td>{{ formatDate(person.registered) }}</td>

<td v-bind:class="activeClass(person)">

{{ activeStatus(person) }}

</td>

</tr>

</table>

</div>

And the JavaScript for our Vue app should look something like this:

const app = new Vue({

el: '#app',

data: {

people: [...],

currency: '$',