Wie filtere ich eine Reihe von Zahlen in vue.js

Question

Ich baue einen Katalog einer großen Anzahl von eher grundlegenden Produkten und ich muss in der Lage sein, die Daten mit einer Reihe von Zahlen anstelle einer genauen Übereinstimmung zu filtern.

ich Schleife durch meine Daten wie folgt aus:

<input type=text" v-model="nameFilter"> 

<div v-for"product in products | filterBy nameFilter in 'name'> 
    <p>Name: {{product.name}}</p> 
    <p>Width: {{product.width}}</p> 
    <p>Height: {{product.height}}</p> 
</div> 

Die bestehende filterBy funktioniert gut. Keine Probleme dort. Ich muss aber auch Produkte nach Höhe und Breite filtern, aber nicht nach genauem Wert. Ich kann es zum Laufen bringen, wenn ich nach einem genauen Wert (zB 0,750) filtere, aber wenn möglich, muss ich Produkte basierend auf einem Bereich filtern.

Zum Beispiel lassen Sie uns sagen, dass wir dieses:

<select v-model="widthFilter"> 
    <option value="" selected>Filter by Width</option> 
    <option value="0.000-0.999">0.000-0.999</option> 
    <option value="1.000-1.999">1.000-1.999</option> 
    <option value="2.000-2.999">2.000-2.999</option> 
    ... 
</select> 

Offensichtlich ist dies nicht funktionieren würde, wie sie ist, aber ist es eine Möglichkeit, Elemente zu filtern, um eine Reihe von Zahlen, wie dies in vue.js gegeben?

Answer 1

Benutzerdefinierter Filter ist hilfreich.

Vue.filter('range', function(width, range) { 
 
\t const widthInRange = []; 
 
\t for(let i of width) { 
 
\t \t if(i >= range[0] && i <= range[1]) widthInRange.push(i) 
 
\t } 
 
\t return widthInRange; 
 
}); 
 
var data = {"width": [1, 2, 3, 4, 5, 6, 7]}; 
 
new Vue({ 
 
\t el: "#obj", 
 
\t data: data 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<div id="obj"> 
 
\t <span v-for="item in width|range [2,5]">{{item}}</span> 
 
</div>