全選選項的 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

您的代碼期望this.selected在調用isSelected()之前填充每個組。 您需要在該方法中添加邏輯以檢查this.selected[group]是否存在，如果不存在則添加。

此外，Vue 已經提供了您正在編寫的大部分功能，例如，這應該負責切換每個復選框的邏輯：

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

（參考： https ://v2.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已經包含了它需要的每個組名，正如我之前提到的。