Блог

Главная - Вопросы по программированию - флажки v-on: изменить не запускающую функцию для выбора всех

флажки v-on: изменить не запускающую функцию для выбора всех

#javascript #html #vue.js

#javascript #HTML #vue.js

Вопрос:

Когда я меняю значение флажка по отдельности, его v-on:change=»myMethod» получает триггер, но когда я меняю значение с помощью флажка выбрать все, срабатывает только индивидуально измененный v-on:change. Я хочу, чтобы все они были активированы с помощью одного флажка выбрать все.

 new Vue({
    el: '#app',
    data: {
        users: [ 
            { "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com" },
            { "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com" }, 
            { "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com" }, 
            { "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com" }
        ],
        selected: []
    },
    methods:{
            myMethod:function(){
        console.log('OnChange triggered');
        }
    },
    computed: {
        selectAll: {
            get: function () {
                return this.users ? this.selected.length == this.users.length : false;
            },
            set: function (value) {
                var selected = [];

                if (value) {
                    this.users.forEach(function (user) {
                        selected.push(user.id);
                    });
                }

                this.selected = selected;
            }
        }
    }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
    <table>
        <tr>
            <th><input type="checkbox" v-model="selectAll" v-on:change="myMethod"></th>
            <th align="left">Name</th>
        </tr>
        <tr v-for="user in users">
            <td>
                <input type="checkbox" v-model="selected" :value="user.id" v-on:change="myMethod" >
            </td>
            <td>{{ user.name }}</td>
        </tr>
    </table>
</div>
</div>