私はそれをクリックするとliタグのクラスを変更したいのですが、いくつかの条件の下で必要なのは元々クラスがアクティブな状態です。どのように動作させるには？ここに私のコードは次のとおりです。v-onの内部で何らかの条件を設定することはできますか？
<li v-for="timeslot in hourly.Slots" class="time-slot"
v-bind:class="{'selected': timeslot.Status=='selected', 'unavailable': timeslot.Status =='unavailable',
'active': timeslot.Status=='available'}" v-on:click="timeslot.Status='selected'">
これは、クリックのメソッドを呼び出すと、タイムスロットは次のように、利用可能であるかどうかという方法で確認することで行うことができます。
フィドル作業var demo = new Vue({
el: '#demo',
data: function(){
return {
hourlySlots: [
{ 'Status' : 'unavailable', name: "john" },
{ 'Status' : 'available' , name: "Danny" }
]
};
},
methods: {
selectSlot: function(timeslot) {
if(timeslot.Status =='available'){
timeslot.Status ='selected'
}
}
}
})
ありがとう〜それが動作します。 – Winston
取得しているエラーと達成したいものは何ですか？ 'hourly.Slots'がどのように見えるかを追加できますか？ – Saurabh
こんにちはsaurabh、私はタイムスロットの表示でいくつかのliのタグを持っていますが、それを表示するために使用不可能なクラスといくつかが使用可能なクラスで利用可能であり、使用可能な場合は、クラスを選択済みに変更し、無効にすることはできません。 – Winston
今、チェックはありません。リをクリックすると、利用可能なものも利用できないものも、選択されたクラスに変更されます。 – Winston