Vue v-bind：class更改绑定对象的值时无法立即工作

Question

在Vue中，我想将动态类添加到元素中，我认为开发人员可以使用v-bind:class。
但是在下面的示例中，v-bind:class无法正常工作。

//Html
<div id="mainapp">
  <span class="star" v-bind:class="{gold:obj.selected}" v-on:click="clickStar()">star</span>
</div>

//Script
var app = new Vue({
  el:"#mainapp",
  data:{
    obj:{}  
  },
  methods:{
    clickStar:function(){
      if(this.obj.selected == undefined) this.obj.selected =false;
      //this.obj.selected=!this.obj.selected;
      this.$set(this.obj, 'selected', !this.obj.selected);
      console.log(this.obj);
    }
  }
})

JsFiddle Example

单击元素span标签时，obj.selected的值由clickStar函数更改。
但是，尽管在更改$set时使用了obj，但v-bind：class却不起作用。
Reason that Dom is not updated
我怎么了 我该如何解决这个问题？

Answer 1

您应该在初始化时定义所有数据属性。

将数据对象更改为。

data : { object: { selected:false
} }

小提琴更新了js fiddle

Answer 2

合并类属性：

:class="`star ${obj.selected ? 'gold' : ''}`"

methods:{
  clickStar () {
    if (this.obj.hasOwnProperty('selected') {
      this.obj.selected = !this.obj.selected
    } else {
      this.$set(this.obj, 'selected', true);
    }
  }
}

Adding reactive properties

另一种方法是使用ref：

<span ref="star" class="star" @click="clickStar">star</span>

methods:{
  clickStar () {
    if (this.obj.hasOwnProperty('selected') {
      this.obj.selected = !this.obj.selected
    } else {
      this.$set(this.obj, 'selected', true);
    }

    if (this.obj.selected) {
      this.$refs.star.$el.classList.add('gold')
    } else {
      this.$refs.star.$el.classList.remove('gold')
    }
  }
}