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

Question

Im trying out vue.js and cannot really figure out how i can filter a rendered list of items by simply select an option in a box.

Each list item has a pric property. eg. $200, $500, $600 etc.

My select box options each has a price range. eg 0 - $250, $250 - $500, $500 - $750.

When i for example choose $200 - $500 in the select box i only want the items in the list which has a price somewhere in between that range to be visible.

html:

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

template:

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

Answer 1

Since i first misunderstood the question I've updated the original answer. Anyway, here is a jsfiddle that does what i believe you are trying to do.

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

I've placed your min/max values in an array so we can loop through these with our select element. Than we create a computed array, this array returns all values between the selected min/max.

I've also added a filter to add the currency symbol.