10
テーブルにユーザーのリストを表示しています。各行にはユーザーを選択するチェックボックスがあり、チェックボックスの値はユーザーのIDです。選択したIDは、表の下のスパンに表示されます。すべてのチェックボックスをチェックするvuejs
テーブルのヘッダーにある「すべて選択」チェックボックスのチェックボックスをすべてオフにして、すべてのチェックボックスを選択解除するにはどうすればよいですか？これを行うにはDOMとやりとりするのか、それともvueオブジェクトを使うのか、私はそれが後者であるべきだと思っていますが、簡単な作業のように見えるものにはどうやって接近するのかがはっきりしていませんか？どんな助けもありがとう！
HTML
<div id="app">
<h4>Users</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select <input type="checkbox" @click="selectAll"></th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td><input type="checkbox" v-model="selected" value="{{ user.id }}"></td>
</tr>
</table>
</div>
<span>Selected Ids: {{ selected| json }}</span>
</div>
Javascriptを/ Vuejs
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "[email protected]",
{ "id": "2", "name": "Duane Metz", "email": "[email protected]"},
{ "id": "3", "name": "Myah Kris", "email": "[email protected]"},
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "[email protected]"},
{ "id": "5", "name": "Brendon Rogahn", "email": "[email protected]"}
],
selected: []
},
methods: {
selectAll: function() {
// ?
}
}
})
問題：1）すべてを選択してください。 2）1項目を選択解除します。 SelectAllチェックボックスが選択されなくなります。 – Sigma
@Sigma良いキャッチ、私はフィドルに修正を加えました、おそらく素晴らしい解決策ではありませんが、それは機能します。お気軽にあなた自身の解決策を投稿してください。 – haakym
メソッドselectAllでは、if（！this.allSelected）ではなくif（this.allSelected）でなければなりません。使用する必要はありません！ 。 –