如何使用Vue Slider控制元素

Question

我在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小提琴: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">

更新了小提琴.