v-model in icheck-box component not working in vue
Question
I'm trying to create a checkbox component but I am unable to do it. How can I create three checkboxs (using ichecks and inputs) and get all the selected ones using v-model in an array? The problem is that I can get the value of the clicked checkbox separately but I can not get all the values in array as it is suppose happen with vue's v-model. It seems that, they are getting lost somewhere. here my code
<html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<div id='app'>
<icheck :value="'Jack'" id="jack" v-model="checkedNames" > </icheck>
<icheck :value="'John'" id="john" v-model="checkedNames" > </icheck>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</html>
<script>
Vue.component('icheck', {
props: {
value:{ required: false }
},
template: `
<input type="checkbox" >
`,
mounted: function () {
var vm = this
$(this.$el).iCheck({
//checkboxClass: 'icheckbox_minimal',
checkboxClass: 'icheckbox_square-red',
//radioClass: 'iradio_minimal',
radioClass: 'iradio_square',
increaseArea: '20%' // optional
})
.val(this.value)
.trigger('ifChanged')
// emit event on change. here the problem
.on('ifChanged', (event)=>{
let isChecked = event.target.checked
let val = event.target.value
// here the problem need an array
vm.$emit('input',isChecked ? [val]:[])
});
},
watch: {
value: function (value) {
// update value
$(this.$el).val(value)
}
}
})
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
2 answers
solution1
1 2018-07-03 05:37:14
Here is how I would do it.
<icheck :val="'Jack'" id="jack" v-model="checkedNames" > </icheck>
<icheck :val="'John'" id="john" v-model="checkedNames" > </icheck>
props: {
val:{ required: true },
value: { required: false }
},
....
// Check if the value is preset from the props and toggle check
if (this.value.includes(this.val)) {
$(this.$el).iCheck('check');
}
$(this.$el).iCheck({
//checkboxClass: 'icheckbox_minimal',
checkboxClass: 'icheckbox_square-red',
//radioClass: 'iradio_minimal',
radioClass: 'iradio_square',
increaseArea: '20%' // optional
})
.val(this.val)
.trigger('ifChanged')
.on('ifChanged', (event)=>{
// create a local copy so as not to modify the prop
let value = [].concat(this.value)
// check if the array includes the value already
if(value.includes(this.val)){
// if it does remove it
value.splice(value.indexOf(this.val), 1)
} else {
// if it doesn't add it
value.push(this.val)
}
// emit the entire array
vm.$emit('input', value)
});
solution2
0 2018-07-03 05:12:19
I see what you try to do, but this only works with native checkboxes. if the v-model is an array and the element is a checkbox , it will change the v-model to something like v-model="data[index]" . This does not work with custom elements, as you try to do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.