使用Vue.js过滤列表

达蒙GO2020-03-12

我刚刚开始使用Vue.js，这是我正在做的事情：我正在渲染产品列表，每个产品都有一个name，一个gender和一个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()
        }
      }
    }
  )

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

我设法更新了性别，但是过滤部分出现了问题。页面加载时，我不需要任何过滤。他们在文档中建议使用，v-if但似乎与此配置不兼容。

如果使用v-if，我可以这样做：

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

但是同样，由于性别为空，这在页面加载时不起作用。我找不到解决方法。

我应该如何处理这个问题？

computed: { filteredItems() { return this.allStartupData.filter(item => { let byName = item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1; let byDescription = item.description.toLowerCase().indexOf(this.search.toLowerCase()) > -1; if (byName === true) { return byName; } else if (byDescription === true) { return byDescription; } }); } }