Vue 슬라이더를 사용하여 요소를 제어하는 방법

Vue 슬라이더를 사용하여 요소를 제어하는 방법

제 데이터에는 많은 데이터가 있습니다.requestsjson 오브젝트기본적으로 모든 데이터가 사용자에게 표시됩니다.또한 슬라이더 컴포넌트가 있습니다.사용자가 슬라이더를 움직이면 슬라이더 값에 따라 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 Fielle을 만들었습니다.https://jsfiddle.net/hvb9hvog/9/

질문.

어떻게 수정하면requests슬라이더 값을 기반으로 한 json?

filteredRequests의 다른 계산 속성을 만듭니다.

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

요청을 나열할 때 사용합니다.

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

바이올린 업데이트

임계값을 개체 데이터에 매핑하는 계산된 속성을 만듭니다.

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

임계값을 v-if 조건으로 사용:

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

여기 작동 중인 바이올린이 있습니다.

언급URL : https://stackoverflow.com/questions/47143695/how-to-control-elements-using-vue-slider