[Vuejs]-I want to change the color of the <li> with a select option using vue.js

by

0👍

✅

You already have the color in this.selected:

new Vue({
  el: '#app',
  data: {
    selected: 'Select color',
    options: [
      { text: 'Green', value: 'green' },
      { text: 'Red', value: 'red' },
      { text: 'Blue', value: 'blue' }
    ]
  },
computed:{
 cueCardColor() {
      if(this.selected!='Select color'){
        return this.selected
      }
      return 'transparent'
    }

}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
  <li :style="{ 'background-color': cueCardColor }"> 
<select v-model="selected">

  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}

  </option>

</select>
</li>
</ul>
</div>

Leave a comment