Vue 的搜索框和复选框过滤器 [英] Search Box and Checkbox filter with Vue

问题描述

我正在尝试使用 Vue 构建过滤器系统.

更新

过滤器工作，但所有计算的函数都是分离的函数.那么我怎样才能在一个功能中制作它们并使用它.

导出默认{数据() {返回 {庄园:[],搜索: ''，地区:['关西','关东','京桥'],已检查区域:[]}},创建(){axios.get('/ajax').then((response) => {this.estates = response.data;});},计算:{一:函数(){var 结果 = this.estates.filter((estate) =>Estate.building_name.match(this.search));如果(this.checkedRegions.length && this.checkedRooms.length){return result.filter(estate => this.checkedRegions.includes(estate.region) && this.checkedRooms.includes(estate.rooms))}返回结果；}}}

<div class="row"><div class="col-md-9"><input type="text" v-model="search" name="" placeholder="search Estate" value=""><div v-for="过滤状态中的遗产" class="card-body"><h2>{{estate.building_name}}</h2><p>{{estate.address}}</p>

filteredestate filteredRegions 和 filteredRooms 组成一个函数.例如如何使用 && 返回这些函数?并在这个 div 中使用它.

解决方案

首先将您的过滤器搜索结果设置为变量，您可以通过 or(||) 表达式检查过滤器！

<块引用>

我修改了箭头函数内部的this，设置为那个变量，最后一行返回result作为默认值

一:function() {var that = this;var 结果 = this.estates.filter((estate) =>Estate.building_name == that.search;);如果(this.checkedRegions.length || this.checkedRooms.length){return result.filter(estate => that.checkedRegions.includes(estate.region) || that.checkedRooms.includes(estate.rooms))}//当区域和房间长度为 0 时返回结果；}}

I am trying to build filter system with Vue.

Updated

Filters working, but all the functions computed are separeted functions. So How can I make those in one function and use it.

export default {

    data() {
        return {
            estates: [],
            search: '',
            regions:['関西','関東','京橋'],
            checkedRegions:[]
        }
    },
    created(){
        axios.get('/ajax').then((response) => {
            this.estates = response.data;
        });
    },
    computed: {
        one: function() {
            var result =  this.estates.filter((estate) =>
                estate.building_name.match(this.search)
            );
            if(this.checkedRegions.length && this.checkedRooms.length) {
                return result.filter(estate => this.checkedRegions.includes(estate.region) && this.checkedRooms.includes(estate.rooms))
            }
            return result;
        }
    }
}

<div class="container-fluid">
        <div class="row">
            <div class="col-md-9">
                <input type="text" v-model="search" name="" placeholder="search estate" value="">
                <div v-for="estate in filteredestate" class="card-body">
                    <h2>{{estate.building_name}}</h2>
                    <p>{{estate.address}}</p>
                </div>
            </div>
        </div>
    </div>

filteredestate filteredRegions and filteredRooms make one function. for example how to return those function with && ? And use it in this div.

<div v-for="estate in oneFunction" class="card-body">

解决方案

Set your filter search result first as variable and you can check filter by or(||) expression !

I modified this inside arrow function by setting to that variable and on the last line return result as default

one: function() {
  var that = this;
  var result =  this.estates.filter((estate) =>
    estate.building_name == that.search;
  );
  if(this.checkedRegions.length || this.checkedRooms.length) {
    return result.filter(estate => that.checkedRegions.includes(estate.region) || that.checkedRooms.includes(estate.rooms))
    }
  // when region and room length is 0
  return result;
  }
}

这篇关于Vue 的搜索框和复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！