How to control elements using Vue Slider

user_654203 0
Viewed 96

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?

vuejs2 vue.js slider javascript
2 Answers

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.

user_380650

Create a computed property where you map a threshold into the object data:

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

Use the threshold as v-if condition:

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

Here is a working fiddle

user_37269630
Related