Невозможно снять / проверить флажки при снятии флажка / флажка заголовка после взаимодействия с отдельными флажками - Vuejs

Question

Ситуация 1 - Я отмечаю свои индивидуальные флажки, флажок моего заголовка проверяется.Это метод 1 и отлично работает.

Код для того же

index.vue

<VCheckbox
 checked={this.checkSelections[idx]}
    nativeOnChange={e => {

    this.$set(this.checkSelections, idx, e.target.checked);
    let allSelected = true;
    for (let i = 0; i < this.checkSelections.length; i++) {
        allSelected = this.checkSelections[i];
        if (!allSelected) break;
    }
    this.$root.$emit("checkmarkHead", { allSelected });
    }}
/>

Head.vue

  mounted() {
    this.$nextTick(() => {
        this.$root.$on("checkmarkHead", ({ allSelected }) => {
        console.log("checkmarkHead", allSelected);
         this.allSelected = allSelected;
      });
    }

  },

Ситуация 2 -

Я отмечаю свой заголовок и все мои флажки отмечены.И наоборот тоже верно.Так что метод 2, соответствующий этому, тоже работает нормально.

Код для того же самого -

Head.vue

  <HeadItem>
    <VCheckbox
        checked={this.allSelected}
        nativeOnChange={e => {
        this.allSelected = e.target.checked;
        this.$root.$emit("selectAll", {
            allSelected: this.allSelected
        });
        }}
    />
</HeadItem>

index.vue

mounted() {
   this.$nextTick(() => {
        this.$root.$on("selectAll", ({ allSelected }) => {
        this.checkSelections = Array(this.sortedData.length).fill(allSelected);
     });
   });
 }

Проблема - Когда я делаю ситуацию 2 после ситуации 1, те же методы не работают, как ожидалось.Вид не обновляется.Аналогично, выполнение ситуации 1 после ситуации 2 также не будет работать.

Вот ссылка на

Кодовая ссылка - https://codesandbox.io/s/vmwy3v4203

Теперь я ничего не понимаю после обработки всех предупреждений о мутациях и т. Д.

Answer 1

Я должен извиниться перед тобой.Это действительно еще одна проблема реактивности, которая может быть решена путем предоставления атрибута ключа ..

Специальный атрибут key в основном используется в качестве подсказки для виртуального алгоритма DOM Vue дляидентифицируйте VNodes при сравнении нового списка узлов со старым списком.Без ключей Vue использует алгоритм, который минимизирует перемещение элементов и пытается как можно больше исправлять / повторно использовать элементы одного и того же типа на месте.С ключами, он будет переупорядочивать элементы на основе изменения порядка ключей, а элементы с ключами, которых больше нет, всегда будут удалены / уничтожены.

Вы можете присвоить уникальное значение keyэлемент, который при изменении заставит Vue перерисовать этот элемент.В вашем случае вы можете назначить ключи вашим элементам VCheckbox, равным их значению checked, вынуждая Vue повторно визуализировать их, когда они отмечены / не отмечены.Например ..

<HeadItem>
  <VCheckbox
    key={this.allSelected}
    checked={this.allSelected}
    nativeOnChange={e => {
      this.$emit('change', !this.allSelected)
    }}
  />
</HeadItem>

Я позволил себе переписать ваше свойство allSelected как вычисляемое свойство и удалил прослушиватель событий, который вы установили в корневом экземпляре.Я думаю, что так намного чище ..