How to control elements using Vue Slider

Question

I have a bunch of data in the requests json object. By default all the data is displayed to the user. Additionally, I have a slider component. I am trying to make functionality such that when the user moves the slider, the elements of the json appear/disappear based 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 data to be displayed but when the user moves the slider, I only want data displayed that has value greater than current value of the slider.

I've made a JS Fiddle here: https://jsfiddle.net/hvb9hvog/9/

Question

How can I modify the requests json based on the value of the slider?

Answer 1

Create another computed property for the filteredRequests.

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

And use it to list the requests.

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

Updated fiddle.