Search code examples
javascriptlaravelvuejs2bootstrap-selectpicker

how to set dynamic style in select option in vue js

<select v-model="selectcurrency"
   @change="[get(),ready(),setcookie()]"
   class="selectpicker"
   data-live-search="true"
   data-width="120px"
   style="width: 80px;">
      <option v-for="item in currency" :value="item"
         :style="color:'red'" //this style>
            @{{item.symbol}} -- @{{ item.name }}
      </option>
</select>

I need the option tag with item.count where it will color it black if item.count > 0 and color it red if item.count < 0.

Then an image in option tag with item.image but this doesn't work 

data-subtext="<img src='item.icon' class='img img-circle img-thumbnail'>"
Solution

  • You can use Class And Style Bindings with Ternary Operator

    In your situation:

    <option v-for="item in currency" :value="item"
    :style="{ color: item.count > 0 ? 'red' : 'black'" //use like this>
    @{{item.symbol}} -- @{{ item.name }}
</option>