Framework: @error blade directive is interfering with VueJS event listener

[ClaudioEyzaguirre]

• Laravel Version: 5.8.13
• PHP Version: 7.3.2
• Database Driver & Version: n/a

Description:

I have a Blade file with a VueJS component that listen to a custom "error" event:

<some-vue-component @error="onErrorHandler"></some-vue-component>

But I'm getting this error: syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF).

I opened the compiled blade file and found that Laravel recognizes @error as a blade directive and not as a valid VueJS event listener, and compile @error to PHP code:

<some-vue-component
    <?php if ($errors->has()) :
        if (isset($message)) { $messageCache = $message; }
        $message = $errors->first(); ?>="onErrorHandler"
></some-vue-component>

Am I missing something?

[seriquynh]

It is caused by https://github.com/laravel/framework/pull/28062. You currently should use @verbatim before any discussion. This directive tells blade to ignore the given code.

[devcircus]

Because both blade and vue use some of the same syntax, you have to tell laravel about any vue directives or renders that it should ignore and leave for vue to process. You do this by prepending an "@". So your code should look like:

<some-component @@error=“onErrorHandler”></some-component>

[ClaudioEyzaguirre]

Thanks @xuanquynh @devcircus for the explanation.

Maybe @error must be recognized as a blade directive only if it has parens with a expression: @error('field'), but I don't know if this is possible.

[devcircus]

Same as using {{ $variable }}. If you want Vue to process this instead of blade, you have to do the same: @{{ $variable }}.

Yeah that wouldn’t work. Since laravel allows you to create your own directives, it has to allow you to ignore anything that starts with “@“. So it can’t be that specific.

[driesvints]

Closing since a solution was provided above.