全选选项的 VUE 组件

Question

在我的应用程序中，我在同一页面上有多个表格（也是多个页面）。每个表格的每一行都有“全选”选项和复选框。代码重用真的很有帮助，但我无法让它发挥作用。目前我有以下方法，但我总是在渲染中得到错误：“TypeError：无法读取未定义的属性'包含'”。现在这是代码在一个组件内，但应该可供另一个组件使用。如何正确地将其添加到独立组件中，然后在其他组件中使用？

在挂载方法中有一个字段被选中：{}。

Vue HTML 模板：

<input type="checkbox" v-bind:checked="isSelected(sts.id, 'country')"
      @click="toggleSelected(sts.id, 'country')">

Vue 方法：

isSelected(id, group) {
  return this.selected[group].includes(id);
},

toggleAll(event, group, items) {
  let state = $(event.target).prop("checked");
  for (let st of items) {
    if (state === true) {
      this.addSelected(st, group);
    } else {
      this.removeSelected(st, group);
    }
  }
},

addSelected(id, group) {
  if (!this.isSelected(id, group)) {
    this.selected[group].push(id);
  }
},

removeSelected(id, group) {
  this.selected[group] = this.selected[group].filter(item => item !== id);
},

toggleSelected(id, group) {
  if (this.isSelected(id, group)) {
    this.removeSelected(id, group);
  } else {
    this.addSelected(id, group);
  }
},

Answer 1

您的代码需要在调用isSelected() 之前使用每个组填充this.selected。您需要在该方法中添加逻辑以检查 this.selected[group] 是否存在，如果不存在则添加。

另外，Vue 已经提供了您正在编写的大部分功能，例如，这应该负责切换每个复选框的逻辑：

    <input
        type="checkbox"
        v-model="selected.country"
        :value="sts.id"
    >

（参考：https://vuejs.org/v2/guide/forms.html#Checkbox）

对于“toggle all”功能，您可以在单独的文件中创建这样的辅助方法，然后根据需要导入它：

toggleAllHelper(selectedItems, items) {
  const allBoxesChecked = items.every((item) => {
    return selectedItems.includes(item.id));
  });

  return allBoxesChecked ? [] : items.map(item => item.id);
},

你可以在组件内部这样使用它：

import { toggleAllHelper } from 'helpers.js';

...

methods: {
    toggleAll(groupName, items) {
        const selectedArray = toggleAllHelper(this.selected[groupName], items);
        this.selected[groupName] = selectedArray;
    }
}

但是，要使其正常工作，首先您需要确保 this.selected 已经包含它需要的每个组名，正如我之前提到的。