Vérifiez toutes les cases à cocher vuesjs

J'affiche une liste des utilisateurs dans un tableau, chaque ligne a une case à cocher pour sélectionner l'utilisateur et la case de valeur est l'ID de l'utilisateur. Sélectionnés Id sont affichés dans un span en dessous de la table.

Comment puis-je sélectionner toutes les cases à cocher et décocher toutes les cases sur le clic sur "sélectionner tout" dans la case que j'ai dans la tête de mon tableau? Puis-je interagir avec le DOM pour ce faire, ou par l'intermédiaire de la vue de l'objet, je pense qu'il devrait être le dernier, mais tout à fait savez pas comment aborder ce qui semble être une tâche facile?! Toute aide serait appréciée!

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

source d'informationauteur haakym

  1. 3

    Ajoutant ma propre réponse que les modifications de la réponse par nhydock n'étaient pas acceptés (je crois?).

    Solution choisit et sélectionne tous.

    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": "[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: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll: function() {
            this.userIds = [];

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

    De travail violon: https://jsfiddle.net/okv0rgrk/3747/

  2. 1

    Tout ce que vous avez à faire est d'ajouter vos utilisateurs, à l'aide de leur ID puisque c'est la façon dont vous faites référence à leurs valeurs avec la case à cocher, et les ajouter dans votre tableau sélectionné.

    selectAll: function() {
    this.selected = [];
    for (user in this.users) {
        this.selected.push(this.users[user].id);
    }
}

    L'Exécution De JSFiddle