Cách kiểm soát các yếu tố bằng Vue Slider

Question

Tôi có một loạt dữ liệu trong đối tượng json requests. Theo mặc định, tất cả dữ liệu được hiển thị cho người dùng. Ngoài ra, tôi có một thành phần thanh trượt. Tôi đang cố gắng tạo ra chức năng như vậy khi người dùng di chuyển thanh trượt, các phần tử của json xuất hiện/biến mất dựa trên giá trị của thanh trượt.

Ví dụ:

dữ liệu:

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

Theo mặc định tôi muốn tất cả các dữ liệu sẽ được hiển thị nhưng khi người dùng di chuyển thanh trượt, tôi chỉ muốn dữ liệu hiển thị có value lớn hơn giá trị hiện tại của thanh trượt.

Tôi đã thực hiện một Fiddle JS ở đây: https://jsfiddle.net/hvb9hvog/9/

Câu hỏi

Làm thế nào tôi có thể sửa đổi các requests json dựa trên giá trị của thanh trượt?

Answer 1

Tạo thuộc tính được tính toán khác cho filterRequests.

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

Và sử dụng nó để liệt kê các yêu cầu.

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

Updated fiddle.

Answer 2

Tạo một tài sản tính nơi bạn ánh xạ một ngưỡng vào dữ liệu đối tượng:

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

Sử dụng ngưỡng như v-nếu điều kiện:

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

Đây là một working fiddle