php脚本中的响应数据在根Vue实例中不可用

我有用于模态窗口的vuejs组件。 当用户填写所需字段中的所有数据时：

将数据发送到服务器

设置超时以可视化用户正在发送的数据（将fa自旋类应用于按钮）

关闭模式窗口

从服务器接收应答（带有成功消息的php控制器）

向用户显示消息已发送的警报块

现在我对第2点、第4点和第5点有问题。超时不起作用，模式窗口立即关闭。php脚本中的响应数据在根Vue实例中不可用。我只能在组件内部看到服务器响应，但我不知道如何将其传递给ROOT

views\layout.blade.php

                <div v-if="FreeZamerSent" class="alert alert-dismissible fade show" :class="class" role="alert">
                  @{{ message }}
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>


<freezamermodal v-if="showFreeZamerModal" @close="showFreeZamerModal = false" @sent="onFreeZamerSent(response)"></freezamermodal>

resources\js\components\FreeZamerModal.vue

<template>

<div class="modal is-active" id="FreezamerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Заказать бесплатный замер</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="$emit('close')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <form method="POST" action="/freezamer" @submit.prevent="onSubmit">
          <input type="hidden" name="_token" :value="csrf">
          <div class="modal-body">
              <input type="hidden" class="form-control" name="formname" :value="formname">
              <input type="hidden" class="form-control" name="currentUrl" :value="currentUrl">
              <div class="error" v-if="!$v.customer_name.required">Введите имя</div>
              <div class="error" v-if="!$v.customer_name.minLength">Имя должно содержать минимум {{$v.customer_name.$params.minLength.min}} буквы.</div>
              <div class="error" v-if="!$v.customer_name.cyrillic">Имя должно состоять только из русских букв</div>
              <input type="text" class="form-control" name="customer_name" placeholder="Ваше имя" :class="{ 'form-control--error': $v.customer_name.$error }" v-model.trim="$v.customer_name.$model">

              <div class="error" v-if="!$v.customer_email.required">Введите email</div>
              <div class="error" v-if="!$v.customer_email.email">Введите существующий email</div>
              <input type="text" class="form-control" name="customer_email" placeholder="Ваш e-mail" :class="{ 'form-control--error': $v.customer_email.$error }" v-model.trim="$v.customer_email.$model">

              <div class="error" v-if="!$v.customer_phone.required">Введите номер телефона</div>
              <div class="error" v-if="!$v.customer_phone.minLength">Телефон должен содержать 11 цифр.</div>
              <input type="tel" class="form-control" name="customer_phone" placeholder="Ваш телефон" :class="{ 'form-control--error': $v.customer_phone.$error }" v-model.trim="$v.customer_phone.$model" v-mask="'+# (###) ###-##-##'">
          </div>
          <div class="modal-footer">

            <button class="button button_fill" type="submit" :disabled="$v.$invalid">
              <svg v-if="!success"><use xlink:href="#plan"></use></svg>
              <i class="fa fa-spinner fa-spin" v-if="success"></i>
              <span>Бесплатный замер</span>
            </button>

          </div>
        </form>
    </div>
  </div>
</div>

</template>

<script>
    import { alpha, email, helpers, maxLength, minLength, numeric, required } from 'vuelidate/lib/validators';
    import {mask} from 'vue-the-mask';
    export const cyrillic = helpers.regex('cyrillic', /^[А-Яа-яёЁ\s]+$/);

    export default {
        name: "FreeZamerModal",

        data: function () {
          return {
            currentUrl: window.location.pathname,
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            formname: 'freezamer',
            customer_name: '',
            customer_email: '',
            customer_phone: '',
            success: false,
            errors: []
          }
        },

        directives: {mask},

        methods: {
          onSubmit () {
            axios.post('/freezamer', this.$data)
            .then(this.onSuccess)
            .catch(error => this.errors = error.response.data);
          },

          onSuccess (response) {
            this.success = true;
            setTimeout(5000);
            this.$emit('sent', response);
          },

        },

        mounted() {
           console.log('Freezamer component mounted.')
        },

        validations: {
          customer_name: {
            required,
            cyrillic,
            minLength: minLength(3)
          },
          customer_email: {
            required,
            email
          },
          customer_phone: {
            required,
            minLength: minLength(18),
            maxLength: maxLength(18)
          }

        }

    }
</script>

相反，我在控制台中有错误

[Vue warn]: Property or method "response" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'message' of undefined"

found in

---> <FreeZamerModal> at resources/js/components/FreeZamerModal.vue
       <Root>

[Vue warn]：属性或方法“response”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。
[Vue warn]：v-on处理程序中出错：“TypeError:无法读取未定义的属性“message”
发现于
--->位于resources/js/components/FreeZamerModal.vue

我使用vue devtools一步一步地发现了问题。下面的代码

this.$emit（'sent'，response）

将大响应对象传递给根实例并访问response.data 工作解决方案如下。 唯一的缺点是我无法理解setTimeout为什么不工作。动作

此。$emit（'sent'，response）

不是在5秒后立即触发的。5秒钟后，我在控制台中看到错误。 如果删除超时，则一切正常

resources\js\components\FreeZamerModal.vue

          onSuccess (response) {
            this.success = true;
            setTimeout(this.$emit('sent', response), 5000);
          },

resources\js\app.js

    data: {
        showFreeZamerModal: false,
        FreeZamerSent: false,
        message: '',
        alertclass: ''
    },
    methods: {
        onFreeZamerSent (response) {
            this.showFreeZamerModal = false,
            this.FreeZamerSent = true,
            this.message = response.data.message,
            this.alertclass = response.data.alertclass
        },

blade.php

<freezamermodal v-if="showFreeZamerModal" @close="showFreeZamerModal = false" @sent="onFreeZamerSent"></freezamermodal>

    data: {
        showFreeZamerModal: false,
        FreeZamerSent: false,
        message: '',
        alertclass: ''
    },
    methods: {
        onFreeZamerSent (response) {
            this.showFreeZamerModal = false,
            this.FreeZamerSent = true,
            this.message = response.data.message,
            this.alertclass = response.data.alertclass
        },

<freezamermodal v-if="showFreeZamerModal" @close="showFreeZamerModal = false" @sent="onFreeZamerSent"></freezamermodal>

VM27172:1 Uncaught SyntaxError: Unexpected identifier
setTimeout (async)
onSuccess @ FreeZamerModal.vue?0b2e:81
Promise.then (async)
onSubmit @ FreeZamerModal.vue?0b2e:75
submit @ FreeZamerModal.vue?b9fb:63
invokeWithErrorHandling @ vue.common.dev.js?4650:1859
invoker @ vue.common.dev.js?4650:2184
original._wrapper @ vue.common.dev.js?4650:7543