CODEWITHSUNDEEP
javascriptphplaravelvue.jslaravel-spark
Alana Storm
Alana Storm

Reputation: 166046

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?

Upvotes: 2

Views: 1029

Answers (2)

Belmin Bedak
Belmin Bedak

Reputation: 9201

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

Upvotes: 3

Leo
Leo

Reputation: 7420

@ symbol its a Laravel thing to inform the Blade rendering engine an expression should remain untouched. The @ is used in Laravel blade templates.

Upvotes: 1

Related Questions