Получение старых данных при событии @click на Laravel + Vue

Question

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

Вот мой код:

Компонент

<template>
    <div class="container">
        <form @submit.prevent>
            <label v-for="day in daysInWeek" v-bind:key="day.value">
                <input type="checkbox" @click="checkDays()" v-bind:value="day.value" v-model="event.daysActive">
                <span>{{ day.label }}</span>
            </label>
        </form>
    </div>
</template>

Скрипт

<script>
    data() {
        return {
            event: {
                eventName  : "",
                startDate  : "",
                endDate    : "",
                daysActive : [],
            },
            daysInWeek: [
                {label: 'Monday',    value: "mon"},
                {label: 'Tuesday',   value: "tue"},
                {label: 'Wednesday', value: "wed"},
                {label: 'Thursday',  value: "thu"},
                {label: 'Friday',    value: "fri"},
                {label: 'Saturday',  value: "sat"},
                {label: 'Sunday',    value: "sun"},
            ],
        };
    },

    methods : {
        checkDays() {
            console.log(this.event); // giving me the correct result
            console.log(this.event.daysActive); // giving me the data before the action
        }   
    }
</script>

Это результат, который я получаю

Почему это так?

Спасибо

Answer 1

https://codepen.io/edward1995/pen/YzyqPwq?editors=1010

<div id="app">

   <div class="container">
        <form @submit.prevent>
            <label v-for="day in daysInWeek" v-bind:key="day.value">
                <input v-if="checkDays" type="checkbox"  v-bind:value="day.value" v-model="event.daysActive">
                <span>{{ day.label }}</span>
            </label>
        </form>
    </div>
</div>


new Vue({
  data() {
        return {
            event: {
                eventName  : "",
                startDate  : "",
                endDate    : "",
                daysActive : [],
            },
            daysInWeek: [
                {label: 'Monday',    value: "mon"},
                {label: 'Tuesday',   value: "tue"},
                {label: 'Wednesday', value: "wed"},
                {label: 'Thursday',  value: "thu"},
                {label: 'Friday',    value: "fri"},
                {label: 'Saturday',  value: "sat"},
                {label: 'Sunday',    value: "sun"},
            ],
        };
    },

    computed : {
        checkDays() {

          return this.event.daysActive
        }   
    }
}).$mount('#app')

Answer 2

Попробуйте изменить методы () на computed ()

<script>
    data() {
        return {
            event: {
                eventName  : "",
                startDate  : "",
                endDate    : "",
                daysActive : [],
            },
            daysInWeek: [
                {label: 'Monday',    value: "mon"},
                {label: 'Tuesday',   value: "tue"},
                {label: 'Wednesday', value: "wed"},
                {label: 'Thursday',  value: "thu"},
                {label: 'Friday',    value: "fri"},
                {label: 'Saturday',  value: "sat"},
                {label: 'Sunday',    value: "sun"},
            ],
        };
    },

    computed : {
        checkDays() {
            console.log(this.event); // giving me the correct result
            console.log(this.event.daysActive); // giving me the data before the action
        }   
    }
</script>