Vueスライダを使用して要素を制御する方法

Question

requests jsonオブジェクトにはデータがたくさんあります。デフォルトでは、すべてのデータがユーザーに表示されます。さらに、私はスライダーコンポーネントを持っています。ユーザーがスライダを動かすと、スライダの値に基づいてjsonの要素が表示/非表示になるような機能を作ろうとしています。例えば

：

データ：デフォルトで

requests: [ 
       {value: 10, name: "foo"}, 
       {value: 12, name: "bar"}, 
       {value: 14, name: "foobar"}, 
       {value: 22, name: "test"}, 
       {value: 1, name: "testtooo"}, 
       {value: 8, name: "something"} 
      ] 

私はすべてのデータを表示させたいが、ユーザがスライダーを動かしたとき、私は唯一の現在の値よりもvalue大きなを持って表示されるデータが欲しいですスライダ

私はここでJSフィドル作りました：https://jsfiddle.net/hvb9hvog/9/

質問

どのように私は、スライダーの値に基づいてrequests JSONを修正することができますか？

Answer 1

filteredRequestsの別の計算されたプロパティを作成します。

filteredRequests(){ 
    return this.requests.filter(r => r.value > this.num) 
} 

これを使用してリクエストを一覧表示します。

<li v-for="request in filteredRequests"> 

Updated fiddle。

Answer 2

オブジェクトデータにしきい値をマップ計算されたプロパティを作成します：

computed: { 
     myList: function() { 
     return this.requests.map(r=> { 
     r.threshold = this.num >= r.value 
     return r 
    }) 

がv-かの条件として、しきい値を使用します。ここでは

<li v-if="request.threshold" v-for="request in myList"> 

はworking fiddle

です