vue.js - 如何在 V-select 中添加条件？

Question

大家好，我想像 min 一样过滤我的财产。卧室和最大卧室

这里我有两个列表框，一个是最小卧室列表框，另一个是最大卧室列表框

如果这次我从最小卧室列表中选择 3 个，从最大卧室列表中选择 5 个，我只想过滤 3 - 5 个卧室范围的属性

export default {
data() {
    return {
      blogs: [],
      minbed: "",
      maxbed: "",
    };
  },
  selectOptionsBedroom() {
    return _.uniqBy(this.blogs.map(g => g.Bedrooms));   
  }
};

 <v-select
                            :items="blogs"
                            v-model="minbed"
                            :options=" selectOptionsBedroom"
                            label="Bedrooms"
                            item-value="Bedrooms"
                            placeholder="Min.Bed"
                          ></v-select>

如何在这里创造条件？

标签： vue.js

Answer 1

filter与计算属性一起使用：

new Vue({
  el: '#app',
  data() {
    return {
      blogs: [],
      minbed: 0,
      maxbed: 0,
    }
  },
  computed: {
    min: {
      get() {
        return this.minbed
      },
      set(value) {
        this.minbed = value
      }
    },
    max: {
      get() {
        return this.minbed >= this.maxbed ? parseInt(this.minbed, 10) + 1 : this.maxbed
      },
      set(value) {
        this.maxbed = this.minbed >= value ? parseInt(value, 10) + 1 : value
      }
    },
    selectOptionsBedroom() {
      return !!this.blogs.length ? this.blogs.filter(g => {
        return (g.Bedrooms >= this.min) && (g.Bedrooms <= this.max)
      }) : []
    }
  },
  mounted() {
    this.blogs = Array.from(Array(20), (x, i) => {
      return {
        Name: `Blog ${i + 1}`,
        Bedrooms: Math.ceil(Math.random() * 5)
      }
    })
    
    this.minbed = 0
    this.maxbed = this.blogs.reduce((max, blog) => {
      return (blog.Bedrooms > max) ? blog.Bedrooms : max
    }, 0)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<div id="app">
  <label>Min</label>
  <input type="number" step="1" min="0" v-model="min">
  <label>Max</label>
  <input type="number" step="1" min="1" v-model="max">
  <ul v-if="selectOptionsBedroom.length">
    <li v-for="item in selectOptionsBedroom" :key="item.Name">{{ item.Name }} - {{ item.Bedrooms }} {{ item.Bedrooms > 1 ? 'rooms' : 'room' }}</li>
  </ul>
  <p v-else-if="!!minbed && !!maxbed">No Results</p>
  <p v-else>Search for blogs</p>
</div>