Optimizing your App and Using Components to Display Data Chapter 3<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">
// Team member template
</script>And you should have the following in your JavaScript:
Vue.component('filtering', {
template: '#filtering-template'
});