如何在vue.js中點擊一個班級？

Question

我有一個組件可以為用戶顯示幾個選項。 用戶應該能夠點擊他喜歡的選項，然后發送表單。

為了給用戶提供某種反饋，我想切換一個類v-on:click 。 如何在selectObjectType()函數中為單擊的object.type設置object.selected = true ？

 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

如果我理解得很好，你想點擊選擇/取消選擇該項目。

我這樣做：

 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>