1
私はユーザーにいくつかのオプションを表示するコンポーネントを持っています。ユーザーは彼が好きなオプションをクリックしてフォームを送信できるはずです。vue.jsのクリックでどのようにクラスを切り替えることができますか？
ユーザーに何らかのフィードバックを与えるために、私はクラスv-on:clickをトグルしたいと思います。クリックobject.selected = trueをselectObjectType()内のobject.typeの機能に設定するにはどうすればよいですか？
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: {
\t 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>
。あなたのselectObjectType関数の中で。他のすべてをfalseに設定する必要があります。 –
@abhishekkannojiaこれはスクリプトエラーの原因になりますが、これは私がやりたいことです！ –
@JVLoboユーザーは複数の回答を選択できるはずですので、各項目のクラスを個別に切り替えたい –