Optimizing your App and Using Components to Display Data Chapter 3
<label for="fiterField">
Field:
<select v-on:change="changeFilterField($event)"
id="filterField">
<option value="">Disable filters</option>
<option value="isActive">Active user</option>
<option value="name">Name</option>
<option value="email">Email</option>
<option value="balance">Balance</option>
<option value="registered">Date
registered</option>
</select>
</label>
<label for="filterQuery" v-
show="this.filter.field &&
!isActiveFilterSelected()">
Query:
<input type="text" id="filterQuery" v-
model="filter.query">
</label>
<span v-show="isActiveFilterSelected()">
Active:
<label for="userStateActive">
Yes:
<input type="radio" v-bind:value="true"
id="userStateActive" v-model="filter.query">
</label>
<label for="userStateInactive">
No:
<input type="radio" v-bind:value="false"
id="userStateInactive" v-model="filter.query">
</label>
</span>
</form>
</script>
<script type="text/x-template" id="team-member-
template">
<tr v-show="filterRow()">
<td>
{{ person.name }}
</td>
<td>
<a v-bind:href="'mailto:' + person.email">{{
person.email }}</a>
</td>
<td v-bind:class="balanceClass">
{{ balance }}
</td>