Я показываю список пользователей в таблице, каждая строка имеет флажок для выбора пользователя, а значение флажка - это идентификатор пользователя. Выбранные идентификаторы, в свою очередь, отображаются в диапазоне ниже таблицы.
Как я могу выбрать все флажки и снять все флажки с помощью флажка "Выбрать все", который у меня есть в заголовке моей таблицы? Я взаимодействую с 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() {
// ?
}
}
})