How to apply classes for all child components?

[wpq]

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 the span elements from within q-bar? (as opposed to applying it to all the child elements one by one)

[jraez]

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.

[qyloxe]

@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'
    }
  }
}

[dobbel]

@qyloxe wonderful creative magic