Javascript 全选选项的VUE组件

在我的应用程序中，我在同一页上有多个表（也有多个页）。每个表的每一行都有“全选”选项和复选框。代码重用真的很有帮助，但我不能让它工作。目前我有以下方法，但我在呈现时总是出错：“TypeError:无法读取未定义的属性'includes'。现在，这是一个组件中的代码，但应该可以用于另一个组件。如何正确地将其添加到独立组件中，然后在其他组件中使用

在装入的方法中，选择了一个字段：{}

Vue HTML模板：

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

---

您的代码希望在调用

isSelected（）

之前，使用每个组填充

this.selected

。您需要将逻辑添加到该方法中，以检查所选[group]是否存在，如果不存在，则添加它

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

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

您可以在组件中这样使用它：

import { toggleAllHelper } from 'helpers.js';

...

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

---

但是，要使其工作，首先需要确保

this.selected

已包含它所需的每个组名，正如我前面提到的那样。

我后来也发现了这一点。有没有办法把它解压缩到单独的文件中？正在工作，谢谢。我在页面上有一个分页，因此我不能覆盖“toogleAll”上的整个字段。现在我得到了这样一个信息：“TypeError:无法读取未定义的“selected”属性”

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