javascriptphplaravelvue.jslaravel-spark

What is the @ Symbol in a Laravel Spark Vue.js Template?

In Laravel Spark's template files, you'll occasionally see something like this

<span class="help-block" v-show="form.errors.has('name')">
    @{{ form.errors.get('name') }}
</span>

That is, a span that's conditionally toggled visible/invisible based on the form's current errors.

I understand this part

{{ form.errors.get('name') }}

It's a Vue.js template that will display the string returned by form.errors.get('name'). However -- what's the @ symbol in front of the template for? I know, as an attribute, @ is a shorthand for v-on. However,

v-on{{ form.errors.get('name') }}

makes even less sense to me, so I'm guessing the @ symbol does something else here. Is this a Vue.js thing? A Laravel Spark thing? Something else?

Solution

  • It's because Vue and Laravel Blade use the same syntax for binding dynamic values and expressions.

    @ into the mustaches expression (in blade file) means that Laravel should ignore it so Vue will take care of It.

    Note: If you want to use another templating expression for Vue, check delimiters section in docs - https://v2.vuejs.org/v2/api/#delimiters