How to manage items using Vue Slider

Question

I have a bunch of data in the requests json object. By default, all data is displayed to the user. In addition, I have a slider component. I am trying to make such functionality that when the user moves the slider, the json elements appear / disappear depending on the value of the slider.

For example:

Data:

  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"} ] 

By default, I want all the data to be displayed, but when the user moves the slider, I only need data that has a value greater than the current value of the slider.

I created JS Fiddle here: https://jsfiddle.net/hvb9hvog/9/

Question

How can I change json requests based on slider value?

Answer 1

Create another computed property for filtered queries.

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

And use it to list queries.

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

Updated violin .

Answer 2

Create a computed property in which you map the threshold to the object data:

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

Use the threshold as a v-if condition:

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

Here is a working fiddle