代码之家 › 专栏 › 技术社区 › Andrew Li

Vue V-Bind:更改绑定对象的值时类不立即工作

vue.js javascript

Andrew Li · 技术社区 · 7 年前

在Vue中,为了向元素添加动态类,我认为开发人员使用 v-bind:class .
但在下面的示例中, V型绑定:类 工作不正常。

//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:但是类不起作用 $set 用于更改 obj .
Reason that Dom is not updated
我怎么了? 我如何解决这个问题?

2 回复 | 直到 7 年前

Brian Lee 7 年前

组合类属性:

: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')
    }
  }
}

hema sundar Ginni 7 年前

您应该在数据属性的首字母签名时定义它。

将数据对象更改为。

data : { object: { selected:false } }

小提琴更新 js fiddle

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前