Question

我在requests json对象中有一堆数据。默认情况下，所有数据都显示给用户。另外，我有一个滑块组件。我试图使功能，当用户移动滑块时，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">

Updated fiddle

Answer 2

创建一个计算属性，将阈值映射到对象数据中：

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

这是working fiddle

如何使用Vue Slider控制元素

2 个答案: