Javascript 使用Vue.js筛选列表

我刚刚开始使用Vue.js，下面是我正在做的：我正在呈现一个产品列表，每个产品都有一个

名称

、一个

性别

和一个

大小

。我希望用户能够通过输入性别来过滤产品

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

但是，当页面加载时，这同样不起作用，因为性别是空的。 我找不到解决这个问题的办法

---

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

使用计算属性-类似这样的内容（下面是按类型筛选项目的示例）

模板：

  <div id="app">

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

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

  </div>

{{item.name}

演示：

您可以尝试

v-if=“！gender | | product.gender==gender”

然后你可以在filteredItems中迭代，比如

 <v-flex v-for="(obj,index) in filteredItems" :key="index" xs12 md4>

---

刚刚修改了诺拉的答案

您需要在模板中更改为：

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

---

工作演示：

这是正确的方法。再看一下官方文件你好，你能检查一下这个问题吗：如果我们想在“类型”和“名称”上搜索这个怎么办？@BakhtawarGIll在这种情况下，你需要有你想筛选的密钥列表，并对每个密钥执行相同的操作。这就像一个符咒！我正在使用一个基于

值的简单过滤器。在这种情况下，您的解决方案是最好的！谢谢。请注意，这违反了样式指南。如果使用，Eslint将显示警告（请参阅）。

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

 <v-flex v-for="(obj,index) in filteredItems" :key="index" xs12 md4>

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

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.value
        }
      }
    }
  );