[Vuejs]-Response data from php script is not available in ROOT Vue instance

by

0👍

Step by step I found the problem using vue-devtools. Following code this.$emit('sent', response)passing big response object to ROOT instance and to access response.data
working solution is following.
The only drawback is that I cannot understand why setTimeout is not working. Action this.$emit('sent', response) is triggered immediately not after 5 seconds. After 5 seconds I see error in console.
If remove timeout everything works.

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>

error in console, which appear after 5 seconds

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

Leave a comment