如何在vue-filter中添加范围？

Question

我有一个应用程序，使用过滤器，我想得到的产品在一个特定的价格范围内使用复选框。例如，如果我单击复选框，则产品的价格范围为100-200。

这是我的模板：

<div class="filter float-end">
      <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
        class="column is-12-tablet is-4-desktop is-4-widescreen"
        v-for="product in filteredRecipes"
        :key="product._id"
      >
</div>

这是我的剧本标签。如果我单击一个特定的复选框，它只显示价格，即$100或$200，我曾经单击过。

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

如何在100到200之间的价格范围内显示产品？

Answer 1

我猜你想要的是：

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

Answer 2

解决方法之一是将收音机的值赋值为value="100to200"。

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

然后我们可以绑定一个事件@change来获得过滤的产品。

现场演示

​

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>

​