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

Question

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

每个列表项都有一个价格属性。例如。 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;
      }
    }
})

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

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