如何过滤带有复选框项目的数组？

Question

我想过滤我的复选框我在互联网上搜索它有信息但我无法使用我的代码。

这是网页

我希望当您单击复选框时，它必须与类别相同。

这是复选框的一些代码：

<div>
  <input class="form-check-input checkboxMargin" type="checkbox" value="All" v-model="selectedCategory">
  <p class="form-check-label checkboxMargin">All</p>
</div>

这是我的灰盒布局：

<div class="col-sm-12 col-md-7">
        <div class="card rounded-circle mt-5" v-for="item of items" :key="item['.key']">
          <div>
            <div class="card-body defaultGrey">
              <h5 class="card-title font-weight-bold">{{ item.name }}</h5>
              <div class="row mb-2">
                <div class="col-sm ">
                  <div class="row ml-0"><h6 class="font-weight-bold">Job:</h6><h6 class="ml-1">{{ item.job }}</h6></div>
                  <div class="row ml-0"><h6 class="font-weight-bold">Category:</h6><h6 class="ml-1">{{ item.categories }}</h6></div>
                  <div class="row ml-0"><h6 class="font-weight-bold">Location:</h6><h6 class="ml-1">{{ item.location }}</h6></div>
                  <div class="row ml-0"><h6 class="font-weight-bold">Niveau:</h6><h6 class="ml-1">{{ item.niveau }}</h6></div>
                  <div class="row ml-0"><h6 class="font-weight-bold">Availability:</h6><h6 class="ml-1">{{ item.availability }}</h6></div>
                  <h6>{{ item.info }}</h6>
                  <div class="row ml-0"><h6 class="font-weight-bold">Posted:</h6><h6 class="ml-1">{{ item.user }}</h6></div>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-1 ml-3" v-if="isLoggedIn">
                  <router-link :to="{ name: 'InternshipDetails', params: {id: item['.key']} }" class="btn bg-info editbtn">
                    Details
                  </router-link>
                </div>

                <div class="col-xs-1 ml-3 mr-3" v-if="isLoggedIn && item.user == currentUser">
                  <router-link :to="{ name: 'Edit', params: {id: item['.key']} }" class="btn btn-warning editbtn">
                    Edit
                  </router-link>
                </div>

                <div class="col-xs-1" v-if="isLoggedIn && item.user == currentUser">
                  <button @click="deleteItem(item['.key'])" class="btn btn-danger dltbtn">Delete</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

我在这里有我的 object 但是我如何用类别过滤我的灰色框：

selectedCategory: []

Answer 1

您需要在CategoryCheckBox组件和ListCard组件之间创建one-way绑定。

因为当我无法重现它时您提供了单独的代码以根据您自己的解决方案为您提供解决方案，所以我建议使用此示例来解释我的解决方案。

第一步：

您有很多方法可以使用插件或Vuex或全局实例对您的items进行 CRUD，在我的示例中，我在main.js中使用了全局实例

Vue.prototype.$myArray = ["Books", "Magazines", "Newspaper"];

我假设您在ListCards组件中创建了您的items数据

第二步：

您需要在checkbox中添加@change事件来处理checked和unchecked状态。 我使用 static 数据（书籍）作为value 。

 <label>
<input type="checkbox" value="Books" @change="handleCategory($event)" /> Books

现在，让我们实现handleCategory方法，但在此之前，我们知道Checkbox和ListCards是独立的，这意味着我们需要定义bus来创建它们之间的event通信，这是您的问题，所以我们在main.js中定义bus

Vue.prototype.$bus = new Vue({});

现在我们像这样定义handleCategory ：

methods: {
    handleCategory(e) {
      this.$bus.$emit("checkCategory", e);
    }
  }

第三步：

我们的ListCards如何监听这个event ？

通过在created组件时调用$bus.$on(..) （希望您知道 Vue 生命周期方法的含义）

created() {
    this.$bus.$on("checkCategory", e => this.checkCategory(e));
  },

当用户单击复选框时，组件运行handleCategory然后在ListCard checkCategory

在我的 ListCard 中，我有categories和originalCategories作为数据

 data() {
    return {
      categories: this.$myArray,
      originalCategories: this.$myArray
    };
  },

和一个模板：

<ul v-for="(category,index) in categories" :key="index">
      <CategoryItem :categoryName="category" />
    </ul>

和一个created的方法（生命周期）

 created() {
    // $bus is a global object to communicate between components
    this.$bus.$on("checkCategory", e => this.checkCategory(e));
  },

和我们的过滤方法：

 methods: {
    checkCategory(e) {
      let target = e.target;
      let value = e.target.value;

      target.checked
        ? this.filterCatergories(value)
        : (this.categories = this.originalCategories);
    },
    filterCatergories(value) {
      this.categories = this.categories.filter(val => val === value);
    }
  }

对你来说重要的是：

this.categories.filter(val => val === value); //will not do nothing
const categories=this.categories.filter(val => val === value); //will update the view.

您可以更改代码或使其更好更简单。

@更新

您也可以使用计算属性，但是因为我们这里有一个参数，它是我们需要get和set的类别名称。

  computed: {
    filteredItems: {
      get: function() {
        if (this.selectedCategory.length == 0) return this.items;
        return this.items.filter(value => {
          for (const category of this.selectedCategory) {
            if (value == category) return value;
          }
        });
      },
      set: function(category) {
        this.selectedCategory.push(category);
      }
    }
  },
  methods: {
    checkCategory(e) {
      let target = e.target;
      let value = e.target.value;

      target.checked
        ? (this.filteredItems = value)
        : this.selectedCategory.pop(value);
    }
  }

Answer 2

使用计算属性：

computed: {
   filteredItems(){
      if(this.selectedCategory.length == 0) return this.items;
      return this.items.filter(el => {
         for(let i = 0; i < this.selectedCategory.length; i++){
            if(el.categories == this.selectedCategory[i]) return el;
         }
      });

   }
}

然后你 go for v-for="item of filteredItems"

我没有测试它。 如果您提供更多代码，我可以为您提供更多帮助