Vue价格范围过滤器

Question

我正在寻找一个在Vue应用中过滤价格范围的好例子，你会在大多数电子商务网站上看到：https://www.theiconic.com.au/all/?campaign=lp-m-long-weekend-wear&page=1&sort=popularity&price%5B%5D= * - 50＆amp; price％5B％5D = 100-200。

当您选择多个价格区间时，我到目前为止所做的工作并不起作用。任何帮助将不胜感激。

new Vue({
    el: "#app",
    data: {
        url: '',
    products: [],
        filterApplied: [10],
        search: '',
        prices: [
            'Under $25', '$25 to $50', '$51 to $100', 'Over $100'
        ],

    },
    created() {
        axios.get(this.url)
            .then((response) => {
                this.products = response.data;
            })
            .catch((error) => {
                this.products = null;
            });
    },
    computed: {
        filteredProducts() {
            return this.products.filter(product => {
                return this.filterApplied.every(filterApplied => {
                        switch (filterApplied) {
                            case 'Under $25':
                                return product.Price < 25;
                                break;
                            case '$25 to $50':
                                return product.Price >= 25 && product.Price <= 50;
                                break;
                            case '$51 to $100':
                                return product.Price >= 51 && product.Price <= 100;
                                break;
                            case 'Over $100':
                                return product.Price > 100;
                                break;
                        }
                    return product;
                })
            })
        }
    },
    methods: {
        setFilter(filter) {
            if (this.filterApplied.indexOf(filter) > -1) {
                this.filterApplied.pop(filter);
            } else {
                this.filterApplied.push(filter);
            }
            console.log(this.filterApplied);
        }
    }
});

<div class="row" id="app">
    <div class="col-lg-2 col-sm-3">
        <h4>Price Range</h4>
        <a v-for="price in prices" @click.prevent="setFilter(price)">{{ price }}</a>
    </div>
    <div class="col-lg-10 col-sm-9">
        <div class="col-sm-12 product-tiles">
            <div class="product-tile" v-for="product in filteredProducts">
                <p>{{ product.Name }}</p>
                <p>${{ product.Price }}</p>
                <p>{{ product.Details }}</p>
                <br />
            </div>
        </div>
    </div>
</div>

Answer 1

＆＃13;

＆＃13;

new Vue({
    el: "#app",
    data: {
        url: '',
    products: [{Details: 'Cheap', Price: 1, Name: 'Candy'}, {Details: 'Thrifty', Price: 26, Name: 'Burger'}, {Details: 'Spendy', Price: 51, Name: 'Steak'}, {Details: 'Fancy', Price: 101, Name: 'Lobster'}],
        filterApplied: [],
        search: '',
        prices: [
            'Under $25', '$25 to $50', '$51 to $100', 'Over $100'
        ],
        filtersAsNumbers: {
          'Under $25': [0, 25], '$25 to $50': [25, 50], '$51 to $100': [51, 100], 'Over $100': [100, 1000000]
        }
    },
    created() {
       /* axios.get(this.url)
            .then((response) => {
                this.products = response.data;
            })
            .catch((error) => {
                this.products = null;
            }); */
    },
    computed: {
        filteredProducts() {
         return this.products.filter(product => {
            if (this.filterApplied.length < 1) {
              return product 
            } else {
              var productReturn 
              Object.keys(this.filtersAsNumbers)
                .filter(priceRange=> 
                  this.filterApplied.includes(priceRange)
                )
                .filter(priceRangeFiltered=>{
                  let low = this.filtersAsNumbers[priceRangeFiltered][0]
                  let high = this.filtersAsNumbers[priceRangeFiltered][1]
                  if (product.Price >= low && product.Price <= high) {
                    productReturn = product
                  }  
                })
              return productReturn
            }
          })
      }

    },
    methods: {
        setFilter(filter) {
            if (this.filterApplied.indexOf(filter) > -1) {
                this.filterApplied.pop(filter);
            } else {
                this.filterApplied.push(filter);
            }
            console.log(this.filterApplied);
        },
        clearFilter(){
          this.filterApplied = []
        }
    }
});

＆＃13;

.filters, .product-tile { 
  margin: 20px;
}

＆＃13;

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="row" id="app">
    <div class="col-lg-12 col-sm-13">
        <h4>Price Range</h4>
        <a class="filters" v-for="price in prices" @click.prevent="setFilter(price)"> {{ price }}</a>
        <span class="filters" @click.stop="clearFilter">Clear</span>
    </div>
    <div class="col-lg-10 col-sm-12">
       <div class="product-tile" class="product-tiles" v-for="product in filteredProducts">
                <span class="col-sm-4">{{ product.Name }}</span>
                <span class="col-sm-4">${{ product.Price }}</span>
                <span class="col-sm-4">{{ product.Details }}</span>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这不是最优雅的解决方案，但它可以满足您的需求。