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

I'm new to vue.js and I am trying to change the background color using the select option. I tried this method cueCardsColor but still nothing happens

<ul>
  <li :> 
    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
  </li>
</ul>

here are the values and the method

new Vue({
  el: '...',
  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.options
      }
    
    }

}
})

CodePudding user response：

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>