What are the :class Attributes in Laravel Spark/Vue.js

Question

In Laravel spark, a <div/> enclosing a rendered form element might look like this

<div class="form-group" :class="{'has-error': form.errors.has('name')}">

</div>

That is -- is has a :class attribute. What is this? I get the intent/behavior -- if the form.errors.hash('name') call returns true (with form being a SparkForm set on the enclosing component) then the div will have an has-error class. However, what makes :class work? My first assumption was it's a Vue.js thing, but if I read the Vue docs on class and style bindings , it (seems like?) Vue.js expects an attribute named v-bind:class

<div class="form-group" v-bind:class="{'has-error': form.errors.has('name')}">

</div>

So what makes :class work? Is this a Vue.js provided short cut? (if so, is it documented somewhere?).

Is this some patented Laravel syntactic sugar to make writing templates a bit less verbose? If so, where's this implemented?

Is it some third thing?

Answer 1

So what makes :class work? Is this a Vue.js provided short cut? (if so, is it documented somewhere?).

Yes , Its a Vuejs Shorthand

document: https://v2.vuejs.org/v2/guide/syntax.html#Shorthands

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building an SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on :

there is no diffrence between

:class="{'has-error': form.errors.has('name')}

and

v-bind:class="{'has-error': form.errors.has('name')}