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 the span elements from within q-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 😉


Log in to reply