Actually, I need to activate the background color of a div based on the specific value given by the user. So I have done something like this. And don't know how to go further.
<template>
<div>
<div class="row" style="padding-left:6vw; padding-right:6vw;">
<button @click="r_id = 1"><q-icon name="thumb_up" class="reaction col-auto" style="font-size: 3rem;" /></button>
<button @click="r_id = 2"><q-icon name="ion-happy" class="reaction col-auto" style="font-size: 3rem;" /> </button>
<button @click="r_id = 3"><q-icon name="ion-ios-heart" class="reaction col-auto" style="font-size: 3rem;" /> </button>
<button @click="r_id = 4"><q-icon name="ion-sad" class="reaction col-auto" style="font-size: 3rem;" /></button>
<button @click="r_id = 5"><q-icon name="thumb_down" class="reaction col-auto" style="font-size: 3rem;" /></button>
</div>
<div class="button-group">
<q-btn class="button" push color="amber-7" style="width: 75px" @click="Reset()">Reset</q-btn>
<q-btn class="button" push color="positive" style="width: 75px" @click="Submit()">Submit</q-btn>
</div>
</div>
<div v-bind:class="[{active1: r_id === 1},{active2: r_id === 2},{active3: r_id === 3},{active4: r_id === 4},{active5: r_id === 5}]" >
Mycard
</div>
<template>
And my script part is:
export default {
components: {
QBtn,
QIcon
},
data () {
return {
r_id: '',
name: '',
toName: ''
}
},
computed: {
className () {
return 'active' + this.r_id
}
},
methods: {
Submit: function () {
this.hardcode = {
'r_id': this.r_id,
'user_name': 'Shine',
'fb_title': this.fbTitle,
'fb_id': this.id,
'fb_descrption': this.fbDescription,
'created_time': '10 hours ago',
'user_id': '1'
}
this.fbList.push(this.hardcode)
this.Reset()
this.id++
}
}
and my css part is:
active1{background:red;}
active2{background:black;}
active3{background:green;}
active4{background:yellow;}
active5{background:white;}
So how should I go on using Vuejs?