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 :class="+ cueCardColor">
<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
}
}
}
})
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>