已更新

过滤器正常工作，但是所有计算出的功能都是分离的功能。那么我该如何在一个函数中使用它们呢？

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和filteredRooms实现一个功能。例如如何用&&返回那些函数？并在此div中使用它。

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

Answer 1

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

我通过设置该变量来修改了箭头功能内的this，并在最后一行默认返回result

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;
  }
}

Answer 2

rooms和regions是数组。因此，您需要遍历这些数组才能呈现复选框。

代替此：

<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">関東 <input/>
<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">関西 <input/>
<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">北海道<input/>

应该是这样的：

<template v-for="region in regions">
  <input type="checkbox" v-model="checkedLocations"  v-bind:value="region.id">region.region<input/>
</template>

应该使用rooms进行类似操作。

此外，在js部分中，您有checkedRegions，而在模板中，您有checkedLocations。我猜这也应该是checkedRegions。

带有Vue的搜索框和复选框过滤器

已更新

2 个答案: