[英]How can I toggle a class on click in vue.js?
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
. 为了给用户提供某种反馈,我想切换一个类
v-on:click
。 How can I set object.selected = true
for the clicked object.type
inside my selectObjectType()
function? 如何在
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>
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.