CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Al Phaba
Al Phaba

Reputation: 6755

How to change style class when an event has been triggered in vue.js

I have a simple list of items in my component and want to change the style when a item has been selected. Currently I tried this by using v-bind:class and a boolean variable which will be changed when the event has been triggered. I debugged it but it does not work, the class of the list element stays always "list-group-item" instead of the expected "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>

Upvotes: 0

Views: 2547

Answers (1)

ittus
ittus

Reputation: 22393

data should be a function, so that each instance can maintain an independent copy of the returned data object

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

Upvotes: 1

Related Questions