[Vuejs]-How to add a conditions in V-select?

by

0👍

✅

Use filter with a computed property:

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>

Leave a comment