How can I toggle a class on click in vue.js?

Question

I have got a component to display several options for a user. The user should be able to click on the option he likes and then send the form.

To give the user some sort of feedback, I want to toggle a class v-on:click . How can I set object.selected = true for the clicked object.type inside my selectObjectType() function?

 Vue.component('obj', { props: ['name'], template: '<div>{{ name }}</div>' }) new Vue({ el: '#app', data: { message: 'Please select:', objectTypes: [ { type: 'Cat', selected: false }, { type: 'Dog', selected: false }, { type: 'Fish', selected: false }, { type: 'Bear', selected: false }, ], }, methods: { selectObjectType: function (object) { console.log('Selected:', object.type) // how can I change set object.selected = true for the clicked object.type? } } }) 

 .col { height: 200px; width: 20%; cursor: pointer !important; margin-right: 2.5%; margin-left: 2.5%; border-radius: 3px; border: 1px solid lightgray; padding: 20px; box-sizing: border-box; float: left; } .col:hover { border-color: #000; } .col.selected { border-color: green; } 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> <obj class="col" v-for="object in objectTypes" @click.native="selectObjectType(object)" :key="object.id" :name="object.type" :class="{ 'selected': object.selected}" > </obj> </div> 

Answer 1

 Vue.component('obj', { props: ['name'], template: '<div>{{ name }}</div>' }) new Vue({ el: '#app', data: { message: 'Please select:', objectTypes: [ { type: 'Cat', selected: false }, { type: 'Dog', selected: false }, { type: 'Fish', selected: false }, { type: 'Bear', selected: false }, ], }, methods: { selectObjectType: function (object) { object.selected = !object.selected; console.log('Selected:', object.type) } } }) 

 .col { height: 200px; width: 20%; cursor: pointer !important; margin-right: 2.5%; margin-left: 2.5%; border-radius: 3px; border: 1px solid lightgray; padding: 20px; box-sizing: border-box; float: left; } .col:hover { border-color: #000; } .col.selected { border-color: green; } 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> <obj class="col" v-for="object in objectTypes" @click.native="selectObjectType(object)" :key="object.id" :name="object.type" :class="object.selected ? 'selected' : ''" > </obj> </div> 

Answer 2

If I've understood well, you want to click to selec/deselect the item.

I'd do that this way:

 Vue.component('obj', { props: ['name'], template: '<div>{{ name }}</div>' }) new Vue({ el: '#app', data: { message: 'Please select:', objectTypes: [ { type: 'Cat', selected: false }, { type: 'Dog', selected: false }, { type: 'Fish', selected: false }, { type: 'Bear', selected: false }, ], }, methods: { selectObjectType: function (object) { console.log('Selected:', object.type) // how can I change set object.selected = true for the clicked object.type? object.selected = !object.selected; } } }) 

 .col { height: 200px; width: 20%; cursor: pointer !important; margin-right: 2.5%; margin-left: 2.5%; border-radius: 3px; border: 1px solid lightgray; padding: 20px; box-sizing: border-box; float: left; } .col:hover { border-color: #000; } .col.selected { border-color: green; } 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> <obj class="col" v-for="object in objectTypes" @click.native="selectObjectType(object)" :key="object.id" :name="object.type" :class="{ 'selected': object.selected}" > </obj> </div>