vuejs和laravel中的复选框

时间:2016-05-06 08:15:34

标签: laravel-5 vue.js

我想使用v-for生成复选框并使用v-model。但我很难尝试获取复选框的值。这就是我在做的事情。我的观点如下:

<div class="checkbox" v-for="role in userRole">
     <label>
       <input v-model="newUser.urole" type="checkbox"
               value="@{{role.roName}}">@{{role.roName}}</label>
</div>

这是我的Vue Js:

var emailRe = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i

var vm = new Vue({
    el: '#userMgt',
    data: {
        newUser:{
            fname: '',
            mname: '',
            lname: '',
            email: '',
            username: '',
            password: '',
            conpassword: '',
            utype: '',
            urole:''
        },


    },
    methods: {
        fetchUser: function () {
            this.$http.get('../api/users', function (data) {
                this.$set('users', data)
            });
        },
        fetchUserType: function () {
            this.$http.get('../api/usertype', function (data) {
                this.$set('userType', data);
            });
        },
        fetchUserRole: function () {
            this.$http.get('../api/role', function (data) {
                this.$set('userRole', data);
            });
        },
        AddNewUser: function(){
            //user input
            var user = this.newUser;
            alert(user.urole)  ///not alerting right info
            //clear form input
            this.newUser = {fname:'',mname:'',lname:'',email:'',username:'',password:'',conpassword:'',utype:'',urole:''};

            this.$http.post('../api/users', user);
            ;
        },
        selectAll: function(){

        }

    },
    computed: {


    },

    ready: function () {
        this.fetchUser();
        this.fetchUserType();
        this.fetchUserRole();
    }

});

我无法在newUser.urole中获取所选值,当我点击一个时,我的所有复选框都会被选中。我怎样才能做到这一点?。感谢

0 个答案:

没有答案