如何在vue中触发事件时更改样式类。js

Question

我的组件中有一个简单的项目列表，并希望在选择项目后更改样式。目前，我尝试使用v-bind:class和一个布尔变量，当事件被触发时，该变量将被更改。我调试了它，但它不工作，list元素的类始终保持“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>

Answer 1

data应该是一个函数，这样每个实例都可以维护返回数据对象的独立副本

data: function () {
  return {
     isActive: false
  }
}