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

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

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

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

1 个答案: