使用Vue.js过滤列表

我刚刚开始使用Vue.js,这就是我正在做的事情:我正在呈现产品列表,每个产品都有a name,a gender和a size.我希望用户能够按性别过滤产品,方法是使用输入来输入性别.

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()
        }
      }
    }
  )

  

    
{{product.name}}

  
  

我设法更新了性别,但我有过滤部分的问题.页面加载时,我不希望任何过滤.在文档中,他们建议使用,v-if但它似乎与此配置不兼容.

如果我使用v-if,我可以这样做:

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

但同样,当页面加载时,这不起作用,因为性别是空的.我无法找到解决方法.

我该如何处理这个问题？

使用计算属性 - 类似这样的(按类型过滤器项目示例)

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
      })
    }
  }

})

模板:

  


    

      
{{item.name}}
    

    

  

演示:http://jsbin.com/dezokiwowu/edit？html,js,console,output

你可以试试 v-if="!gender || product.gender == gender"