var configuration = { searchableFields: ['title', 'tags', 'actors'], sortings: { name_asc: { field: 'name', order: 'asc' } }, aggregations: { tags: { title: 'Tags', size: 10 }, actors: { title: 'Actors', size: 10 }, genres: { title: 'Genres', size: 10 } } } // the rows comes from external resources // https://github.com/itemsapi/itemsapi-example-data/blob/master/jsfiddle/imdb.js itemsjs = itemsjs(rows, configuration); var vm = new Vue({ el: '#el', data: function () { // making it more generic var filters = {}; Object.keys(configuration.aggregations).map(function(v) { filters[v] = []; }) return { query: '', // initializing filters with empty arrays filters: filters, } }, methods: { reset: function () { var filters = {}; Object.keys(configuration.aggregations).map(function(v) { filters[v] = []; }) this.filters = filters; this.query = ''; } }, computed: { searchResult: function () { var result = itemsjs.search({ query: this.query, filters: this.filters }) return result } } });
<div id="el"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#" v-on:click="reset()">ItemsJS movies</a> </div> <div id="navbar"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" v-model="query" class="form-control" placeholder="Search"> </div> </form> </div><!--/.nav-collapse --> </div> </nav> <div class="container" style="margin-top: 50px;"> <h1>List of items ({{ searchResult.pagination.total }})</h1> <p class="text-muted">Search performed in {{ searchResult.timings.search }} ms, facets in {{ searchResult.timings.facets }} ms</p> <div class="row"> <div class="col-md-2 col-xs-2"> <div v-for="facet in searchResult.data.aggregations"> <h5 style="margin-bottom: 5px;"><strong style="color: #337ab7;">{{ facet.title }}</strong></h5> <ul class="browse-list list-unstyled long-list" style="margin-bottom: 0;"> <li v-for="bucket in facet.buckets"> <div class="checkbox block" style="margin-top: 0; margin-bottom: 0;"> <label> <!--<input class="checkbox" type="checkbox" v-on:click="updateFilters(facet.name, bucket.key)" v-model="filters[bucket.key]" value="{{ bucket.key }}" v-bind:value="isChecked2()">--> <!--<input class="checkbox" type="checkbox" v-on:click="updateFilters(facet.name, bucket.key)" v-model="filters[bucket.key]" v-bind:value="bucket.key">--> <input class="checkbox" type="checkbox" v-model="filters[facet.name]" v-bind:value="bucket.key"> {{ bucket.key }} ({{ bucket.doc_count }}) </label> </div> </li> </ul> </div> </div> <div class="col-md-10 col-xs-10"> <div class="breadcrumbs"></div> <div class="clearfix"></div> <!--<h3>List of items ({{ searchResult.pagination.total }})</h3>--> <table class="table table-striped"> <tbody> <tr v-for="item of searchResult.data.items"> <td><img style="width: 100px;" v-bind:src="item.image"></td> <td></td> <td> <b>{{ item.name }}</b> <br /> {{ item.description }} </td> <td></td> <td> <span style="font-size: 12px; display: block; float: left; background-color: #dbebf2; border-radius: 5px; padding: 1px 3px 1px 3px; margin: 2px;" v-for="tag in item.tags">{{ tag }}</span> </td> </tr> </tbody> </table> <div class="clearfix"></div> </div> <div class="clearfix" style="margin-bottom: 100px;"></div> </div> </div> </div>