按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

自從我第一次誤解了這個問題以來，我已經更新了原始答案。 無論如何， 這是一個我相信您正在嘗試做的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元素遍歷這些值。 與創建計算數組相比，此數組返回選定的最小值/最大值之間的所有值。

我還添加了一個過濾器來添加貨幣符號。