Question

我正在尝试在laravel中使用vue js实现复选框过滤器，但无法正常工作。对于第一个复选框All，当我选中和取消选中复选框时，它将起作用并显示/隐藏所有产品。但是对于Tech，Entertainment和Fictional，它不会根据所单击的复选框来过滤产品。

<style>
    li#menu-item-logo a {
        line-height: 30px;
    }
    li#menu-item-logo a img{
        vertical-align: middle;
    }
</style>

任何帮助将不胜感激

Answer 1

我的猜测是category_id数组中的products是数字类型。但是，selectedCategory数组具有字符串格式的数字。 includes使用严格相等性来检查提供的值在数组中是否存在。这就是为什么它适用于"0"的原因，因为它是作为字符串提供的。如果将其更改为p.category_id.toString()，它将起作用：

这是一个有效的代码段：

new Vue({
  el: '#app',
  data: function() {
    return {
      products: [{ category_id: 1, name: "Tech 1" }, { category_id: 1,name: "Tech 2"},{ category_id: 2, name: "Entertainment 1" },{ category_id: 3, name: "Fictional 1" }],
      selectedCategory: ["0"],
    }
  },
  computed: {
    filteredProduct: function() {
      const app = this,
        category = app.selectedCategory;

      if (category.includes("0"))
        return app.products;
      else
        return app.products.filter(p =>
          category.includes(p.category_id.toString())
        );
    }
  }
})

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

<div class="container" id="app">
  <div class="row ">
    <div class="col-md-4">
      <div class="filter">
        <label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label>
        <label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label>
        <label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label>
        <label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label>
      </div>

    </div>
  </div>
  <div class="col-md-8">
    <div class="card" v-for="product in filteredProduct">
      <div class="card-header">{{product. name}}</div>
    </div>
  </div>
</div>

通过复选框Vue JS过滤产品

1 个答案: