Как связывать и выдавать данные одновременно в Vue?

Question

Я использую Laravel Framework с Vue. У меня есть родительский компонент, который имеет дочерний компонент. Дочерний компонент имеет список флажков, и независимо от того, какой флажок я отмечу, значение добавляется (или удаляется) из массива, хранящегося в data (). Я могу правильно связать входные данные с массивом в дочернем компоненте, но когда я отправляю этот массив обратно в родительский компонент, данные не являются свежими, то есть он отправляет обратно массив с результатом предыдущего флажка, который я поставил , а не текущий. Я хотел знать, как ввести некоторую задержку между привязкой данных и передачей данных, чтобы я мог передавать точные данные.

дочерний компонент

<input type="checkbox" :id="color" :value="color" v-model="colors" @click="$emit('color', colors)" />

data() {
    return {
        colors: []
    }
},

Родительский компонент

<Child v-on:color="updateColors" />

data() {
    return {
        colorList: []
    }
}
updateColors(colors) {
    this.colorList = colors;
}

Вывод: когда я впервые нажимаю на красный, возвращаемый массив становится пустым, когда я затем нажимаю на другой цвет, такой как синий, тогда возвращаемый массив имеет только "красный".

Может ли кто-нибудь помочь мне в связывании данных и одновременной выдаче одних и тех же данных или, если это невозможно, после введения задержки, которая помогает мне сначала сохранить данные в массив, а затем отправить измененный массив обратно в родительский компонент?

Answer 1

Вы можете смотреть свойства данных в Vue и выполнять функцию при их изменении.Например, в вашем дочернем компоненте вы можете наблюдать свойство colors и генерировать событие color, только colors изменяется;

watch: {
  colors: function(){
    this.$emit('color', this.colors);
  }
}

Answer 2

Один из вариантов - изменить событие, которое генерирует данные. В настоящее время вы излучаете, когда click происходит. Но это, как вы упомянули, до обновления данных. Чтобы исправить вашу проблему, вы можете просто изменить событие на @change.

В любом случае, я бы порекомендовал вам использовать хранилище для синхронизации данных между компонентами. Например, вы можете взглянуть на VueX или создать свой собственный магазин. Удобной функцией для создания собственного магазина может быть недавно интегрированный Vue.observable из Vue 2.6, см. Документацию