How to apply classes for all child components?
-
I often have cases where I need to apply the same class to all the children components (for instance on a bar with
span
elements):<q-bar><span class="q-ma-sm">aaa</span><span class="q-ma-sm">bbb</span></q-bar>
Is there a way to apply
q-ma-sm
to thespan
elements from withinq-bar
? (as opposed to applying it to all the child elements one by one) -
basically, no. It’s the very design of HTML itself.
To ease the process you can do two things. Either, put your children components in a loop, or extends the component to let him add himself all the class/css/style you want. -
@wpq well, you can have “class” as computed property, returning object with specific css classes as keys. Even more, you can have this computed property implemented as a mixin and added to all your components. More here:
https://vuejs.org/v2/guide/class-and-style.html
This comes from there:
<div v-bind:class="classObject"></div> ... data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }
-
@qyloxe wonderful creative magic