在 Laravel + Vue 上 @click 事件时获取旧数据答案

【问题标题】：Getting the old data when @click event on Laravel + Vue在 Laravel + Vue 上 @click 事件时获取旧数据
【发布时间】：2020-07-29 18:12:19
【问题描述】：

当我访问方法上的数据时。在我完成操作之前，它会为我提供旧数据。

这是我的代码：

组件

<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>

这是我得到的结果

这是为什么呢？

谢谢

【问题讨论】：

请提供此处输入的错误，而不是图片。

标签： javascript laravel vuejs2

【解决方案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')

【讨论】：

【解决方案2】：

尝试将方法（）更改为计算（）

<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>

【讨论】：

我怎样才能把它称为一个事件？