vue对数组进行搜索、vue搜索、vue模糊搜索

<template>
<div class="query-div">
                        <div class="search-panel input-group mar-btm-dm"
                            style="margin-bottom: 10px;margin-top: 10px;">
                            <input type="text" v-model="search"  class="form-control"
                                placeholder="事件搜索">
                            <span class="input-group-btn">
                                <button @click="clickInputData" class="btn btn-default"
                                    type="button"><i class="ti-search"></i></button>
                            </span>
                        </div>
                </div>
<p v-for="item in searchData">{{item.label}}</p>
</template>
<script>
export default{
	data(){
            return{
                search:'',
                searchData:'',
                options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
            }
        },
 methods:{
	clickInputData:function(){//模糊搜索
                var search = this.search;
                if (search) {
                    this.searchData =  this.options.filter(function(product) {
                        return Object.keys(product).some(function(key) {
                            return String(product[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
            }
}
}
</script>