1.0.4 • Published 5 years ago
@mathewparet/vue-filter-box v1.0.4
@mathewparet/vue-filter-box
A Vue.Js filter box to initiate search based on filter.
Installation
npm install @mathewparet/vue-filter-box
Global Initialization
import Vue from 'vue';
import FilterBox from '@mathewparet/vue-filter-box';
Vue.use(FilterBox);
Local Initialization
import FilterBox from '@mathewparet/vue-filter-box';
export default {
components: {
FilterBox,
}
}
Usage
<template>
<div>
<filter-box class="form-control form-control-sm" @filter="loadData" v-model="searchKey"></filter-box>
</div>
</template>
<script>
export default {
data()
{
return {
searchKey: '',
results: [],
}
}
mounted()
{
this.loadData();
}
methods: {
loadData(filterString=null)
{
// the function argument filterString will also have the filter string. You can use wither that or the v-model.
let filter = this.filterString == null ? '' : this.filterString;
axios.get(`/api/countries?filter=${filter}`)
.then(response => this.results = response.data);
}
}
}
</script>