javascript - Vue v 绑定(bind) :class not working immediately when changing the binded object's value

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函数改变。
但是 v-bind:class 不起作用，尽管在更改 obj 时使用了 $set。
Reason that Dom is not updated
我错了什么？我该如何解决这个问题？

Answer 1

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

将您的数据对象更改为。

data : {
object: {
selected:false<br/>
}
}

fiddle 已更新 js fiddle