选中所有复选框vuejs [英] Check all checkboxes vuejs

问题描述

我在表格中显示用户列表，每行都有一个复选框来选择用户，复选框值是用户的ID。

I'm displaying a list of users in a table, each row has a checkbox to select the user and the checkbox value is the user's ID. The selected IDs are in turn displayed in a span below the table.

如何选择所有复选框，并在点击全选复选框时取消选中所有复选框我在我的表头？我与DOM交互做这个或通过vue对象，我认为应该是后者，但很不确定如何处理似乎是一个容易的任务？任何帮助将不胜感激。

How can I select all checkboxes and deselect all checkboxes on the click of a "select all" checkbox that I have in the header of my table? Do I interact with the DOM to do this or through the vue object, I'm thinking it should be the latter but quite unsure how to approach what appears to be an easy task?! Any help would be appreciated!

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": "[e-mail]", 
            { "id": "2", "name": "Duane Metz", "email": "[e-mail]"}, 
            { "id": "3", "name": "Myah Kris", "email": "[e-mail]"}, 
            { "id": "4", "name": "Dr. Kamron Wunsch", "email": "[e-mail]"}, 
            { "id": "5", "name": "Brendon Rogahn", "email": "[e-mail]"}
        ],
        selected: []
    },
    methods: {
        selectAll: function() {
            // ?
        }
    }
})

推荐答案

添加我自己的答案作为nhydock的答案的编辑不被接受（我认为？）。

Adding my own answer as edits on the answer by nhydock weren't accepted (I think?).

解决方案选择并选择所有。

Solution selects and selects all.

HTML

<div id="app">
    <h4>User</h4>
        <div>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Select <input type="checkbox" @click="selectAll" v-model="allSelected"></th>
                </tr>
                <tr v-for="user in users">
                    <td>{{ user.name }}</td>
                    <td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td>
                </tr>
            </table>
        </div>

        <span>Selected Ids: {{ userIds | json }}</span>
</div>

Javascript / Vuejs

new Vue({
    el: '#app',
    data: {
        users: [ 
            { "id": "1", "name": "Shad Jast", "email": "[e-mail]"}, 
            { "id": "2", "name": "Duane Metz", "email": "[e-mail]"}, 
            { "id": "3", "name": "Myah Kris", "email": "[e-mail]"}, 
            { "id": "4", "name": "Dr. Kamron Wunsch", "email": "[e-mail]"}, 
            { "id": "5", "name": "Brendon Rogahn", "email": "[e-mail]"}
        ],
        selected: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll: function() {
            this.userIds = [];

            if (!this.allSelected) {
                for (user in this.users) {
                    this.userIds.push(this.users[user].id);
                }
            }
        },
    }
})

工作小提琴： https://jsfiddle.net/okv0rgrk/3747/

这篇关于选中所有复选框vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！