背景：names配列にバインドされているチェックボックスのリストがあります。チェックボックスをクリックしたら、特定の名前のクラスを変更しようとしています。
問題：チェックボックスをクリックすると、チェックボックスに付けられた特定の名前ではなく、すべての名前のクラスが変更されます。
HTML
<div id="app">
<ul>
<li v-for="name in names" :key="index">
<input @click="available = !available" type="checkbox">
<label :class="{available:available}" >{{name.name}}</label>
</li>
</ul>
</div>
インスタンスビュー
var app = new Vue({
el: '#app',
data: {
available: false,
names: [{'name':'Jerry'},{'name':'Eddie'},{'name':'Kerry'},{'name':'Jane'}]
}
})
Css
.available{
text-decoration: line-through;
}
使用可能な変数を各名前オブジェクトに追加し、メソッドを使用して使用可能なプロパティを更新します。
var app = new Vue({
el: '#app',
data: {
names: [
{'name':'Jerry', 'available': false},
{'name':'Eddie', 'available': false},
{'name':'Kerry', 'available': false},
{'name':'Jane', 'available': false}
]
},
methods: {
updateAvailable(index) {
// Update the available property on the specific object with its index
this.names[index].available = !this.names[index].available
}
}
})
次に、テンプレートで、メソッドupdateAvailableを呼び出します。
<div id="app">
<ul>
<li v-for="(name, index) in names" :key="index">
<input @click="updateAvailable(index)" type="checkbox">
<label :class="{available: name.available}" >{{name.name}}</label>
</li>
</ul>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加