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