vuejs2如何做到点击搜索进行多条件过滤匹配？需要具体代码。急

[bing_15007]

列表数据以及从json中获取出来了。
<template>
<div class="mainVip">
<div class="queryVip">
<div class="queryTitle">查询条件</div>
<div class="row">
<div class="col-lg-4 list_td">
源：<input type="text" class="form-control" v-model="sourceIp">
</div>
<div class="col-lg-4 list_td">
目标：<input type="text" class="form-control" v-model="destIp">
</div>
<div class="col-lg-4 list_td">
端口：<input type="text" class="form-control" v-model="sourcePort">
</div>
</div>
<button type="button" class="btn btn-primary" v-on:click="query">开始查询</button>
</div>
<div class="allVip">
<div class="queryTitle">全部数据</div>
<div class="tablelist" >
<table class="table table-striped table-bordered" id="datatable" style="min-width:2000px;margin-bottom: 0;">
<thead>
<tr>
<th width="10%">ID</th>
<th width="10%">源</th>
<th width="10%">源NatIP</th>
<th width="10%">目标</th>
<th width="10%">端口</th>
<th width="10%">起始时间</th>
<th width="10%">终止时间</th>
<th width="10%">创建时间</th>
</tr>
</thead>
<tbody>
<tr v-for="value in libraryInfo" >
<td>{{value.id}}</td>
<td>{{value.sourceIp}}</td>
<td>{{value.sourceNatIp}}</td>
<td>{{value.destIp}}</td>
<td>{{value.sourcePort}}</td>
<td>{{value.startTime}}</td>
<td>{{value.endTime}}</td>
<td>{{value.createTime}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

<script>
data (){
return {
libraryInfo: [],
sourceIp:'',
destIp:'',
sourcePort:''
}
},
created() {
let urlApi = '../../static/data.json'
axios.get(urlApi).then((response) => {
let jsonData = response.data
this.libraryInfo = jsonData['data']
}, (response) => {

})
},
methods:{
query(){
//查询按钮

}
}
</script>

[bing_15007]

query(){ var data = { sourceIp: (this.sourceIp || '').trim(), destIp:(this.destIp || '').trim(), sourcePort:(this.sourcePort || '').trim(), } let urlApi = '../data.json' axiosget(urlApi,data).then((response) => { let jsonData = response.data this.libraryInfo = jsonData['data'] }, (response) => { }) },