如何在单击时更改特定(此)按钮类。使用Vue.js 2.0
如何在单击时更改特定(此)按钮类。使用Vue.js 2.0
提问于 2017-02-06 15:34:40
当单击任意按钮时，它们都将变为活动状态。所以我想要的只是被点击的那个应该被改变。
var vm = new Vue({
el: '#toolBtns',
data: {
isActive: false
},
computed: {
activeClass: function () {
return {
active: this.isActive
};
}
}
});<div class="btn-group" role="group" id="toolBtns">
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>
Stack Overflow用户
发布于 2017-02-06 16:08:11
上面的解决方案的方向是正确的，但它很容易出错，因为它直接使用了索引。正如上面的答案所建议的，做一个v-for基本上可以解决你的问题。
var vm = new Vue({
el: '#toolBtns',
data: {
buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false},
{name:'Btn3',active:false}]
},
methods: {
toggleActiveClass:function(index){
this.buttons[index].active=!this.buttons[index].active;
}
}
});
<div class="btn-group" role="group" id="toolBtns">
<button v-for="(btn, index) in buttons" type="button"
@click="toggleActiveClass(index)"
:class="{active: btn.active}">{{btn.name}}
</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42062491
复制相关文章
相似问题
腾讯云开发者
