v-model in icheck-box component not working in vue

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> https://cdn.jsdelivr.net/npm/vue/dist/vue.js http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js <link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet">


       
       

      
      Mike
      
 
      Checked names: {{ checkedNames }}



 </html>



Vue.component('icheck', {
props: { 
    value:{ required: false }
},
template:  `
  
`,
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: 
  }
})

ichecks are actually not checkboxes, they are divs under the hood. you cannot use v-model here. Try listening to the state of ichecks and maintain your own array.
– Ankit Kumar Ojha
Jul 3 at 5:22

2 Answers
2

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.

v-model

checkbox

v-model

v-model="data[index]"

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) });

that works but if I filled the array by code it would not work . this.checkedNames = [ "John", "Jack", "Mike" ];
– Eliuber
Jul 3 at 18:29

@Eliuber just call .iCheck('check') at the beginning of mounted. Check the edit.
– Steven B.
Jul 3 at 18:51

.iCheck('check')

it works if the array start with values , when i change the value after inizializate not work for example if i set in the parent component in mounted. mounted: function () { this.checkedNames= ["John", "Jack", "Mike" ]; },
– Eliuber
Jul 3 at 23:03

i was tring with watch to value but i dont know how exactly
– Eliuber
Jul 3 at 23:05

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Fjhtyj