我想使用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
中获取所选值,当我点击一个时,我的所有复选框都会被选中。我怎样才能做到这一点?。感谢