Multiple values to decide current element class

Posted 7 months ago by nhayder

i have options to make deferent backgrounds to current widget (color, Image, gradient or video), these settings should be determined dynamically. using vuex i was able to get the settings directly from the store like this

<section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" 

// here where i need to check the widget settings inside the class value, something like this

    :class="[proper background value goes here]";

    <widget-config :widget="widget" :index="index"></widget-config>

    <div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">
      <component :is="widget.name" :widget="widget"></component>



the :class="" be checked before rendering the proper value, so basically i have 4 type of backgrounds as above so the code might look like this

      if(bgType == 'color'){

        return widget.bg_color; // widget.bg_color is pulled from vuex store

      }elseif(bgType == 'image'){

        // do somthing

      }elseif(bgType == 'gradient'){

        // do somthing

      }elseif(bgType == 'video'){

        // do somthing


so my question is how to make this type of check using vue.js component

all the best

Please sign in or create an account to participate in this conversation.