Выбрать все чекбоксы по $ emit не перерисовывает представление - Vuejs

Question

Случай - необходимо установить / снять все флажки при изменении заголовка.

Проблема - Я могу отправлять и получать события.Можно увидеть мой модифицированный массив данных.Но некоторая реактивность не работает в Vue, я думаю.

Я выложил очень минимальный вырезанный пример для того же на CodeSandbox - https://88nz9z64j0.codesandbox.io/

Код -

https://codesandbox.io/s/88nz9z64j0

Примечание - Это связано с мутацией массива.Как я могу выбрать отдельные флажки и вижу мой флажок помечен флажок после того, как все выбраны.Однако, обратный процесс не происходит через тот же механизм.Как странно!

Нужно учиться у Array(100).fill(length) как реактивных данных, иначе я делаю что-то глупое.

Answer 1

Проблема в том, что Array.fill модифицировал массив на месте.Vue не может обнаружить изменения в массиве, когда вы напрямую изменяете его элементы .Сначала необходимо создать новый массив, используя split, изменить вновь созданный массив, а затем переназначить его.

this.checkSelections = this.checkSelections.splice(0).fill(allSelected);

CodeSandbox

Answer 2

вы должны проверить эту статью о реактивности в vue и ее подводных камнях https://medium.com/js-dojo/reactivity-in-vue-js-and-its-pitfalls-de07a29c9407, и некоторых разделах о массивах.

Для массивов вам лучше использовать Vue.set

see fork: https://codesandbox.io/s/m7xqk9qn0j

 for(var i = 0; i <= this.checkSelections.length; i++)
 {
      Vue.set(this.checkSelections, i , allSelected);
 }

подробную информацию также можно найти на официальном сайте vue: https://vuejs.org/v2/guide/list.html#Caveats (в этом случае длина массива не изменяется, поэтому caveat1)

Answer 3

В вашей смонтированной функции в table / index.vue вы можете использовать это. $ ForceUpdate () после изменения массива, поскольку vue не может видеть изменения.

mounted() {
  this.$root.$on("selectAll", ({ allSelected }) => {
    console.log("selectAll index.vue", allSelected);
    this.checkSelections = this.checkSelections.fill(allSelected);
    console.log("selectAll", this.checkSelections);
    this.$forceUpdate(); 
  });
}

Более подробную информацию можно найти в документации

Рабочий пример