javascript - 按 vue.js 2 中选定的选项过滤列表

Question

我正在尝试 vue.js，但无法真正弄清楚如何通过简单地在框中选择一个选项来过滤渲染的项目列表。

每个列表项都有一个 pric 属性。例如。 200 美元、500 美元、600 美元等。

我的选择框选项每个都有一个价格范围。例如 0 - $250、$250 - $500、$500 - $750。

例如，当我在选择框中选择 $200 - $500 时，我只希望列表中价格介于该范围之间的商品可见。

html:

<select>
    <option>
        Price 0 - 250
    </option>
    <option>
        Price 250 - 500
    </option>
    <option>
        Price 500 - 750
    </option>
    <option>
        Price 750 - 1000
    </option>
</select>

模板:

<li v-for="(item, index) in items">
    {{ item.price }} // some price in $. eg. $ 340. different for each 
item
</li>

Answer 1

由于我第一次误解了这个问题，所以我更新了原来的答案。无论如何，here是一个 jsfiddle，它可以完成我相信您正在尝试做的事情。

 Vue.filter('currency', function (value) {
    return '€ ' + parseFloat(value).toFixed(2);
});

var demo = new Vue({
    el: '#demo',
    data: {
        items: [5,20],
        limits: [{min: 1, max: 10}, {min:11, max: 25}, {min:26, max: 50}],
        option: 0
    },
    computed: {
        selectedList () {
        var ul = [];
        for(i =0; i < this.items.length; i++) {
            if (this.items[i] > this.limits[this.option].min && this.items[i] < this.limits[this.option].max) {
            ul.push(this.items[i])
          }
        }
        return ul;
      }
    }
})

我已将最小/最大值放入数组中，以便我们可以使用选择元素循环遍历这些值。与我们创建一个计算数组相比，该数组返回所选最小值/最大值之间的所有值。

我还添加了一个过滤器来添加货币符号。