首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue.js中的多选过滤器

Vue.js中的多选过滤器
EN

Stack Overflow用户
提问于 2019-03-26 12:52:13
回答 2查看 79关注 0票数 1

我选择了复选框组(酒店类型和位置),并希望根据所选内容过滤结果。如何将我的selectedLocations和类型添加到filteredHotels()方法并获得过滤结果。悉尼酒店、悉尼背包客、悉尼或墨尔本酒店或所有酒店(如果仅选择酒店)。

HTML

  <div>
    <div class="row pt-5">
        <div class="col">
            <h5>Locations</h5>
            <label v-for="(value, key) in locations">
                {{value}}
                <input type="checkbox" :value="value" v-model="selectedLocations">
            </label>
            {{selectedLocations}}
        </div>
    </div>

    <div class="row pt-5">
        <div class="col">
            <h5>Type</h5>
            <label v-for="(value, key) in types">
                {{value}}
                <input type="checkbox" :value="value" v-model="selectedTypes">
            </label>
            {{selectedTypes}}
        </div>
    </div>


    <transition-group class="row" style="margin-top:30px;" name="list" tag="div" mode="out-in">
        <div class="col-sm-4 pb-3 list-item" v-for="(hotel, index) in filteredHotels" :key="index">
            <div class="sau-card">
                <i class="fal fa-server fa-3x"></i>
                <h2>{{hotel.name}}</h2>
                <p>{{hotel.type}}</p>
                <p>{{hotel.location}}</p>

            </div>
        </div>
    </transition-group>
</div>

数据

data() {
        return {
            locations:['Sydney','Melbourne'],
            types:['backpackers','hotel','resort'],
            selectedLocations:[],
            selectedTypes:[],
            hotels:[
                {name:'a Hotel',location:'Sydney', type:'backpackers'},
                {name:'b Hotel',location:'Sydney', type:'hotel'},
                {name:'c Hotel',location:'Sydney', type:'resort'},
                {name:'d Hotel',location:'Melbourne',type:'hotel'},
                {name:'e Hotel',location:'Melbourne', type:'resort'},
                {name:'f Hotel',location:'Melbourne', type:'hotel'},

            ]
        }
    },

已计算

computed:{
    filteredHotels(){
        if(this.selectedLocations.length){
            return this.hotels.filter(j => this.selectedLocations.includes(j.location))
        }
        else if(this.selectedTypes.length){
            return this.hotels.filter(j => this.selectedTypes.includes(j.type))
        }
        else{
            return this.hotels;
        }
    }
}

Fiddle

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-26 13:03:55

下面是一个有效的示例:

我已经更新了计算属性下的条件,如下所示:只包含被选择的位置。而不是仅仅返回当前选择的位置。

computed:{
        filteredHotels(){
        console.log(this.selectedLocations);
        if(!this.selectedLocations.length) {
            return this.hotels;
          } else {
          return this.hotels.filter(j => this.selectedLocations.includes(j.location))
          }
        }
    }

new Vue({
  el: "#app",
  data: {
    locations: ['Sydney', 'Melbourne'],
    types: ['backpackers', 'hotel', 'resort'],
    selectedLocations: [],
    selectedTypes: [],
    filtersAppied: [],
    hotels: [{
        name: 'a Hotel',
        location: 'Sydney',
        type: 'backpackers'
      },
      {
        name: 'b Hotel',
        location: 'Sydney',
        type: 'hotel'
      },
      {
        name: 'c Hotel',
        location: 'Sydney',
        type: 'resort'
      },
      {
        name: 'd Hotel',
        location: 'Melbourne',
        type: 'hotel'
      },
      {
        name: 'e Hotel',
        location: 'Melbourne',
        type: 'resort'
      },
      {
        name: 'f Hotel',
        location: 'Melbourne',
        type: 'hotel'
      },

    ]
  },
  methods: {
    setActive(element) {
      if (this.filtersAppied.indexOf(element) > -1) {
        this.filtersAppied.pop(element)
      } else {
        this.filtersAppied.push(element)
      }
    },
    isActive: function (menuItem) {
      return this.filtersAppied.indexOf(menuItem) > -1
    },
  },
  computed: {
    filterApplied: function() {
      if (this.filtersAppied.indexOf(element) > -1) {
        this.filtersAppied.pop(element)
      } else {
        this.filtersAppied.push(element)
      }
    },
    filteredHotels: function() {
      return this.hotels.filter(hotel => {
        return this.filtersAppied.every(applyFilter => {
          if (hotel.location.includes(applyFilter)) {
            return hotel.location.includes(applyFilter);
          }
          if (hotel.type.includes(applyFilter)) {
            return hotel.type.includes(applyFilter);
          }
        });
      });
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div class="row pt-5">
      <div class="col">
        {{filteredHotels}}
        <h5>Locations</h5>
        <label v-for="(value, key) in locations">
                {{value}}
                <input type="checkbox" :value="value" v-model="selectedLocations" :checked="isActive(value)" @click="setActive(value)">
            </label> {{selectedLocations}}
      </div>
    </div>

    <div class="row pt-5">
      <div class="col">
        <h5>Type</h5>
        <label v-for="(value, key) in types">
                {{value}}
                <input type="checkbox" :value="value" v-model="selectedTypes"
                :checked="isActive(value)"@click="setActive(value)">
            </label> {{selectedTypes}}
      </div>
    </div>

    <div class="row">
      <div class="col-sm-3 pb-4" v-for="hotel in filteredHotels">
        <div class="card text-center">
          <h1>{{hotel.name}}</h1>
          <p>{{hotel.location}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

希望这能有所帮助!

票数 0
EN

Stack Overflow用户

发布于 2019-03-26 13:06:04

通过绑定this或使用()=>传递数据,例如:

filteredHotels(){
   return this.hotels.filter(function (el) {
     return this.selectedLocations.includes(el.location) 
     || this.selectedTypes.includes(el.type)
   }.bind(this));
}

Fiddle

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55350062

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档