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

问题描述

我在表中显示用户列表，每一行都有一个复选框来选择用户，复选框值是用户的 ID.选定的 ID 依次显示在表格下方的范围内.

如何通过单击表格标题中的全选"复选框来选择所有复选框并取消选择所有复选框?我是与 DOM 交互来执行此操作还是通过 vue 对象进行交互，我认为应该是后者，但不确定如何处理看似简单的任务?！任何帮助将不胜感激！

HTML

<h4>用户</h4><div><表格><tr><th>姓名</th><th>选择<input type="checkbox" @click="selectAll"></th></tr><tr v-for="user in users"><td>{{用户名}}</td><td><input type="checkbox" v-model="selected" value="{{ user.id }}"></td></tr>
<span>选定的 ID:{{ selected|json }}</span>

Javascript/Vuejs

new Vue({el: '#app',数据: {用户: [{ "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]"}],选择:[]},方法: {全选:函数(){//?}}})

解决方案

添加我自己的答案，因为 nhydock 对答案的编辑未被接受(我认为?).

解决方案全选.

HTML

<h4>用户</h4><div><表格><tr><th>姓名</th><th>选择 <input type="checkbox" @click="selectAll" v-model="allSelected"></th></tr><tr v-for="user in users"><td>{{用户名}}</td><td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td></tr>
<span>选定的 ID:{{ userIds |json }}</span>

Javascript/Vuejs

new Vue({el: '#app',数据: {用户: [{ "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]"}],选择:[]，全部选择:假，用户 ID:[]},方法: {全选:函数(){this.userIds = [];如果 (!this.allSelected) {for (user in this.users) {this.userIds.push(this.users[user].id);}}},}})

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

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.

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() {
            // ?
        }
    }
})

解决方案

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);
                }
            }
        },
    }
})

Working fiddle: https://jsfiddle.net/okv0rgrk/3747/

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