Danh sách lọc với Vue.js

Question

Tôi chỉ mới bắt đầu với Vue.js và đây là những gì tôi đang làm: Tôi đang hiển thị danh sách sản phẩm và mỗi sản phẩm có tên, giới tính và kích thước. Tôi muốn người dùng có thể lọc sản phẩm theo giới tính, bằng cách sử dụng đầu vào để nhập giới tính.

var vm = new Vue({ 
     el: '#product_index', 
     data: { 
     gender: "", 
     products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}] 
     }, 
     methods:{ 
     updateGender: function(event){ 
      this.gender = $(event.target).val() 
     } 
     } 
    } 
) 

    <div v-for="product in products" v-if="..."> 
    <p>{{product.name}}<p> 
    </div> 
    <input v-on:change="updateGender"> 

Tôi đã quản lý để cập nhật giới tính nhưng tôi gặp vấn đề với phần lọc. Khi tải trang, tôi không muốn bất kỳ bộ lọc nào. Trong tài liệu hướng dẫn, họ khuyên sử dụng v-if nhưng dường như không tương thích với cấu hình này.

Nếu tôi sử dụng v-if, tôi có thể làm:

v-if="product.gender == gender" 

Nhưng một lần nữa, điều này không làm việc khi tải trang vì giới là rỗng. Tôi không thể tìm được giải pháp cho việc này.

Tôi nên tiếp cận vấn đề này như thế nào?

Answer 1

tính Sử dụng tính - một cái gì đó như thế này (mục bộ lọc dưới đây Ví dụ theo loại)

const app = new Vue({ 

    el: '#app', 

    data: { 
    search: '', 
    items: [ 
     {name: 'Stackoverflow', type: 'development'}, 
     {name: 'Game of Thrones', type: 'serie'}, 
     {name: 'Jon Snow', type: 'actor'} 
    ] 
    }, 

    computed: { 
    filteredItems() { 
     return this.items.filter(item => { 
     return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1 
     }) 
    } 
    } 

}) 

mẫu:

<div id="app"> 

    <div v-for="item in filteredItems" > 
     <p>{{item.name}}<p> 
    </div> 

    <input type="text" v-model="search"> 

    </div> 

Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

Answer 2

Điều đầu tiên: sử dụng một cái gì đó như thế này: http://011.vuejs.org/api/filters.html#filterBy

Điều thứ hai: wr ite an nếu giới tính trống/không xác định, trả lại mọi thứ

Answer 3

Bạn có thể thử v-if="!gender || product.gender == gender"