Multiple values to decide current element class

Posted 6 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.

Reply to

Use Markdown with GitHub-flavored code blocks.