Vue: shorthand directive for class binding

[dantodev]

What problem does this feature solve?

As far as i know, binding a classes on a boolean data/prop works by passing an object like this:

<a href="#" v-bind:class="{'disabled': aBooleanProp}">...</a>

A shorthand for binding a single class would be nice.

What does the proposed API look like?

I'm currently using a custom directive for this. But I thought proposing this as a feature could be a good idea. The syntax of my directive looks like this:

<a href="#" v-c:disabled="aBooleanProp">...</a>

(jsfiddle with implenentation of this directive)

If this request will be implemented to the class directive, the API would look like this:

<a href="#" class:disabled="aBooleanProp">...</a>

Or if this would be implemented with a own prefix like event handler, the API could look like this:

<a href="#" .disabled="aBooleanProp">...</a>

But i don't know if there is any good prefix character for this approche.

[JounQin]

<a href="#" :class="{'disabled': aBooleanProp}">...</a>

It is so short, and I think there is no need to support other syntax.

[dantodev]

The intention for the directive I wrote is, that I am not a huge fan of using the object syntax in HTML code. This is no argument for the feature because it is just my subjective opinion.

But you could also say 'on:click' is already short enough, we don't need @click.

The proposal doesn't just aim to be a short solution, but also to offer a better syntax for the use case that only a single class should be bound.

[donnysim]

That syntax would only be helpful in single file components or inline templates and would require template compiler updates. Html attributes are case insensitive if used in browser so .browserMagic="isButton" would end up as browsermagic class. Would say definitely not worth the trouble.

[dantodev]

Ok, that's a valid point. I close this request and keep using this as custom directive in my projects.