how can i add range in vue-filter-CodePudding

I've an app which uses filter , i want to get products within a specific price range using checkbox for example products within the price range of 100-200 if i click the checkbox this is my template

<div >
      <label><input
          type="radio"
          v-model="price"
          value="All"
        /> All</label>
      <label><input
          type="radio"
          v-model="price"
          value="100"
        /> 100</label>
       <label><input
          type="radio"
          v-model="price"
          value="200"
        /> 200</label>


<div
        
        v-for="product in filteredRecipes"
        :key="product._id"
      >
</div>

this is my script tag ,with this if i click on a speific checkbox it only display the price either $100 or $200 which ever i click


<script>
export default {
  name: "Products",
  data() {
    return {
      products: [],
      price: null,      
    };
  },
 computed: {
    ...mapGetters(["isLoggedIn"]),
    filteredRecipes() {
      let tempRecipes = this.products;
      // Filter out by price
      if (this.price === "All") return tempRecipes;
      tempRecipes = tempRecipes.filter(item => {
        return item.price >= this.price;
      });
      if (this.price)
        tempRecipes = tempRecipes.filter(item => {
          return item.price <= this.price;
        });  
      return tempRecipes;
    }
  },

  
};
</script>

how can i display the product within the price range 100 and 200

CodePudding user response：

One workaround is to assign a value of the radio as value="100to200".

<label>
  <input type="radio" v-model="price" value="100to200"/>
  100 To 200
</label>

And then we can bind an event @change to get the filtered products.

Live Demo :

new Vue({
  el: '#app',
  data: {
    price: null,
    filteredProducts: [],
    products: [{
        id: 1,
      name: 'Product 1',
      price: 50
    }, {
        id: 2,
      name: 'Product 2',
      price: 105
    }, {
        id: 3,
      name: 'Product 3',
      price: 180
    }, {
        id: 4,
      name: 'Product 4',
      price: 210
    }]
  },
  mounted() {
    this.filteredProducts = structuredClone(this.products)
  },
  methods: {
    getProducts() {
      const priceRange = this.price.split('to');
        this.filteredProducts = this.products.filter(({ price }) => {
         return priceRange[1] ? price > Number(priceRange[0]) && price < Number(priceRange[1]) : price === Number(priceRange[0])
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label>
    <input type="radio" v-model="price" value="50" @change="getProducts"/>
    50
  </label>
  <label>
    <input type="radio" v-model="price" value="210" @change="getProducts"/>
    210
  </label>
  <label>
    <input type="radio" v-model="price" value="100to200" @change="getProducts"/>
    100 To 200
  </label>
  <br><br>
  <div v-for="product in filteredProducts" :key="product.id">
    <li>{{ product.name }}</li>
  </div>
</div>

CodePudding user response：

I guess what you want is this:

<label><input type="radio" v-model="filterPrice" value="false"> All Price</label>

<label><input type="radio" v-model="filterPrice" value="true"> Filter Price</label>
<input type="input" v-model.number="minPrice" value="100" :disabled="filterPrice!=='true'"> -
<input type="input" v-model.number="maxPrice" value="200" :disabled="filterPrice!=='true'">

filteredRecipes() {
  if (this.filterPrice !== "true") return this.products;
  return this.products.filter(item => {
    return item.price >= this.minPrice && item.price <= this.maxPrice;
  });
}