Блог

В моем приложении у меня есть несколько таблиц на одной странице (также несколько страниц). В каждой таблице есть опция «Выбрать все» и флажки в каждой строке. Повторное использование кода было бы действительно полезным, но я не могу заставить это работать. В настоящее время у меня есть следующие методы, но я всегда получаю ошибку при рендеринге: «TypeError: не удается прочитать свойство ‘includes’ неопределенного». Прямо сейчас этот код находится внутри одного компонента, но должен быть доступен для другого. Как я могу правильно добавить это в автономный компонент, а затем использовать его в других?

В смонтированном методе выбрано поле: {}.

HTML-шаблон Vue:

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

Ваш код ожидает 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 )

Для функциональности «переключить все» вы можете создать вспомогательный метод, подобный этому, в отдельном файле, а затем импортировать его по мере необходимости:

 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 , что уже содержит все имена групп, которые ему нужны, как я упоминал ранее.