如何在vue.js中触发事件时更改样式类
如何在vue.js中触发事件时更改样式类
提问于 2018-08-05 05:52:58
我在我的组件中有一个简单的项目列表，并且想要在选择一个项目时更改样式。目前，我尝试使用v-bind:class和一个布尔变量，该变量将在事件被触发时更改。我调试过它，但它不工作，列表元素的类总是保持" list -group-item“而不是预期的"list-group-item active”。
<template>
<li class="list-group-item"
style="cursor: pointer"
v-bind:class="{active: isActive}"
@click="serverSelected">
<p> Server <span class="badge badge-secondary">{{ server.id }}</span> [status = {{server.status}}]</p>
</li>
</template>
<script>
import { eventBus } from '../../main'
export default{
props:['server'],
methods:{
serverSelected: function(){
this.isActive = !this.isActive;
console.log("active value is: " + this.isActive);
eventBus.$emit('serverSelected', this.server);
console.log('server selected ' + this.server.id);
}
},
data:{
isActive: false
}
}
</script>
<style>
</style>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-05 05:57:05
data should be a function，这样每个实例都可以维护返回的数据对象的独立副本。
data: function () {
return {
isActive: false
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51689800
复制相关文章
相似问题