Can someone help me with an issue I'm having? I've created a button with a heart symbol that is supposed to change color when clicked, but it's not working as expected.
This is my current code:
<template>
<button v-bind:class="classes" type="submit" @click="toggle">
<span v-text="this.count"></span>
<i class="fas fa-heart fa-sm" v-bind:style="styleObject"></i>
</button>
</template>
<script>
export default {
props: ['reply'],
data(){
return {
isFavorited: this.reply.isFavorited,
count: this.reply.favorites_count
}
},
computed: {
classes(){
return ['btn',this.isFavorited ? 'btn-primary':'btn-secondary'];
},
styleObject(){
return this.isFavorited ? 'color:red':'color:white';
}
},
.......
methods: {
toggle(){
// check if reply is favorited
if(this.isFavorited){
axios.delete('/replies/'+this.reply.id+'/favorites');
this.isFavorited = false;
this.count--;
}else{
axios.post('/replies/'+this.reply.id+'/favorites');
this.isFavorited = true;
this.count++;
}
}
}
When using the inline style binding or the styleObject, the color doesn't change unless I refresh the page. The button class works fine though.
I have also tried other methods like:
<span class="fas fa-heart fa-sm" v-bind:style="[this.isFavorited ? {'color' : 'red'} : {'color' : 'white'}]"></span>
and this way:
styleObject(){
return { color: this.isFavorited ? 'red' : 'white' };
}
The Vue dev tool shows that the color has changed upon clicking, but it's not reflecting on the screen. Any suggestions on how to fix this?