Multiple values to decide current element class

Posted 1 month 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up


Reply to

Use Markdown with GitHub-flavored code blocks.