如何筛选具有多个选择按钮的Vue.js中的数组？

Question

我尝试在Vue.js中过滤数组的一个对象。在这个vue组件中有产品集合。我想用选择按钮过滤这个集合。这些产品是食品，作为默认，我想显示所有的产品，但如果我选择乳酸菌按钮，我想只显示产品是乳酸菌。在我的数据库中，这些选项是true或false。例如，如果我有一个不含乳糖的奶酪，那么在数据库中，我有一个值为true的现场乳酸菌。

我尝试过用计算属性过滤数组，但是我不知道如何去做。

<div class="col-12 justify-content-between row filterbtn">
    <label class="btn btn-primary">
        <input v-model="selected" value="gluteinfree" type="checkbox"  class="check2">GLUTEIN FREE
    </label>

    <label class="btn btn-primary">
        <input v-model="selected" value="lactosefree" type="checkbox"  class="check2">LAKTOZ FREE
    </label>
</div>

<script>
    export default{
        data(){
            return{
                products: [ 
                    { "id": 1, "productName": "Majomkenyérfa kivonat", "gluteinfree": true,  "lactosefree": false, }, 
                    { "id": 2, "productName": "Kókuszolaj", "gluteinfree": false, "lactosefree": true,}, 
                    { "id": 3, "productName": "C-vitamin 80mg", "gluteinfree": true, "lactosefree": true, }, 
                ],
                selected: [],
            }   
        },

        computed: {
            //
        },
    }
</script>

默认情况下，我想展示所有的产品。但当我点击无谷蛋白选择按钮，我只想显示第一个和最后一个产品，其中无谷蛋白是真的。

Answer 1

这是您可以用于计算的代码。这将遍历所有产品，并将每个产品与所选选项列表进行比较。

return this.products.filter(product => this.selected.every(selection => product[selection] === true));

请注意，它使用的是filter和every，对于旧浏览器来说，这可能需要多填充。不过，您也可以转换为更详细的for循环。

代码：

​

new Vue({
  el: '#app',
  data() {
    return {
      products: [{
          "id": 1,
          "productName": "Majomkenyérfa kivonat",
          "gluteinfree": true,
          "lactosefree": false,
        },
        {
          "id": 2,
          "productName": "Kókuszolaj",
          "gluteinfree": false,
          "lactosefree": true,
        },
        {
          "id": 3,
          "productName": "C-vitamin 80mg",
          "gluteinfree": true,
          "lactosefree": true,
        },
      ],
      selected: [],
    }
  },
  computed: {
    zsir() {
      return this.products.filter(prod => this.selected.every(sel => prod[sel] === true));
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="col-12 justify-content-between row filterbtn">
    <label class="btn btn-primary">
  <input v-model="selected" value="gluteinfree" type="checkbox"  class="check2">GLUTEIN FREE</label>
    <label class="btn btn-primary"><input v-model="selected" value="lactosefree" type="checkbox"  class="check2">LAKTOZ FREE</label>
  </div>
  <ul>
    <li v-for="prod in zsir" :key="prod.id">{{prod.productName}}</li>
  </ul>
</div>

​