vue js - 条件样式不起作用

如何解决vue js - 条件样式不起作用

我有一个心形符号和一个提交按钮，点击它后，颜色应该会改变。

我的代码：

 <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++;
            }
        }
    }  

所以我将图标绑定到 styleObject 并且在单击按钮时，除非刷新页面，否则颜色不会改变。但是类按钮按预期工作。

我也尝试过使用内联样式绑定这样写：

 <span class="fas fa-heart fa-sm" v-bind:style="[this.isFavorited ? {'color' : 'red'} : {'color' : 'white'}]"></span>

也是这样：

 styleObject(){
             return { color: this.isFavorited ? 'red' : 'white' };
        } 

我尝试使用 vue dev 工具检查它，它确实显示点击时颜色发生了变化，但它没有反映在我的屏幕上。

我该如何解决这个问题？

解决方法

styleObject 应该返回一个对象，因为在 Vue 中，绑定 style 属性采用对象或数组语法。

styleObject() {
  return this.isFavorited ? { color: 'red' } : { color: 'white' };
}

@Terry 提供的更好的解决方案：

styleObject() {
  return { color: this.isFavorited ? 'red' : 'white' };
}