Vue - Флажок все, чтобы обрабатывать глобальное редактирование выборок - Прилипание объекта - PullRequest
Новая
       67

Vue - Флажок все, чтобы обрабатывать глобальное редактирование выборок - Прилипание объекта

0 голосов
/ 21 марта 2020

Codepen

https://codepen.io/ainsleyclark/pen/yLNqmRq?editors=1011

Цель

Я пытаюсь создать динамическую c систему заказов для клиентов.

Загружаются файлы, которые хранятся в виде массива объектов. Затем создается таблица, которая зацикливается на этих файлах и выплевывает строки таблицы, содержащие продукты.

Когда пользователь нажимает один из этих продуктов, он делает запрос ajax и получает все доступные опции для этого продукта.

Когда установлен флажок «все», пользователь должен иметь возможность редактировать все продукты и опции в глобальном масштабе, а если он не выбран, он возвращается к нормальному поведению.

Проблема:

V-моделирование работает абсолютно безупречно, когда вы не используете никаких флажков. Вы можете увидеть построение заказа с его параметрами. Однако после того, как вы используете флажки, похоже, что v-моделирование застревает, и параметры больше не зависят друг от друга .

Шаги для воспроизведения:

  • Установите флажок все (верхний левый флажок в заголовке таблицы)
  • Выберите продукт (первая запись о продукте)
  • Выберите параметр (первая запись о продукте)
  • Снимите флажок все
  • Попробуйте изменить параметры, и вы увидите, что объект заказа обновляется для всех объектов.

Данные:

У меня есть массив продуктов, содержащий продукты как объекты.

Массив заказов, в котором и заключается проблема, который содержит ключ файла, затем продукт, а затем параметры, связанные с продуктом.

Существует также массив объектов параметров который обновляется, когда пользователь нажимает кнопку выбора, он также содержит ключ файла, чтобы я мог связать его.

Флажок все:

Я считаю, что это связано с тем, как я выбираю продукт как шо w ниже: 

checkboxAllHandler(checked) {
  if (checked) {
    this.files.forEach((file, index) => {
      this.selectedFiles.push(index)
    });

    const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
    console.log(product);
    const order = Object.assign({}, this.order);

    this.selectedFiles.forEach(fileIndex => {
      order['products'][fileIndex] = product || {};
    });

    this.order = {};
    this.order = order;
  } else {
    this.selectedFiles = [];
  }
}

Любая помощь очень благодарна заранее, это была трудная проблема!

1 Ответ

1 голос
/ 21 марта 2020

Во-первых, вы пропустили :key свойство в v-for, поэтому все ваши строки рассматриваются как одинаковые - измените эту строку следующим образом: <tr v-for="(file, fileKey) in files" :key="file">

Во-вторых, у вас l oop вы присвоение всем строкам одного и того же продукта, и это приводит к поведению, которого вы хотите избежать: 

    const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
...
    this.selectedFiles.forEach(fileIndex => {
      order['products'][fileIndex] = product || {};
    });
...