Soy nuevo en vue.js y estoy tratando de cambiar el color de fondo usando la opción de selección. Probé este método cueCardsColor pero aún no pasa nada
<ul> <li :class="+ cueCardColor"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> </li> </ul>aquí están los valores y el método
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 } } } })Ya tienes el color en 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>