iCheck doesn't work with VueJS

Question

I got a weird situation when the iCheck box works fine without VueJS binding. However, when I check on a box, it doesn't link to Vue at all.

HTML code:

<div class="box box-success box-solid" id="root">
  <div class="box-header with-border">
    <h3 class="box-title">Health</h3>

    <div class="box-tools pull-right">
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
      </button>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body" style="display: block;">
    <div class="form-group col-md-12">
      <input type="checkbox" id="green" value="Green" v-model="checkedHealths">
      <label for="green">Green</label>

    </div>
    <div class="form-group col-md-12">
      <input type="checkbox" id="red" value="Red" v-model="checkedHealths">
      <label for="red">Red</label>
    </div>
    <div class="form-group col-md-12">
      <input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths">
      <label for="yellow">Yellow</label>
    </div>
  </div>
  <!-- /.box-body -->
  <pre>{{$data | json}}</pre>
</div>

JS Code:

new Vue ({
  el: "#root",
  data: {
    checkedHealths: ['Green']
  },

  mounted: function(){
      jQuery('input').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
        increaseArea: '20%' // optional
    });
  }
})

I can use the check box, and doesn't seem like it did not fire the event that can catch new value.

You can check my sample code from: http://codepen.io/techcater/pen/mmdLOX

Thanks,

Answer 1

iCheck created a <div/> over your checkbox, so by clicking on this checkbox you're not "really clicking on the checkbox". (Use inspect element over your iCheck checkbox to verify)

Solution: Use a iCheck callback and push/pop elements from your list when you check or you uncheck the item.

This solution worked for me: When clicking on the checkbox add it's value value, to access to your data use Vue's $data API

let app = new Vue ({
  el: "#root",
  data: {
    checkedHealths: []
  },
  
  mounted: function(){
      jQuery('input').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
        increaseArea: '20%' // optional
    });
    jQuery('input').on('ifChecked', function(e){
      app.$data.checkedHealths.push($(this).val());
    });
    jQuery('input').on('ifUnchecked', function(e){
      let data = app.$data.checkedHealths;
      data.splice(data.indexOf($(this).val()),1)
    });

  }, 
  
  methods: {    
    getValue: function(){
      console.log(1);
    }    
  }
})

The example on Codepen, You may find better solutions by playing with iCheck's callbacks. Good luck

Answer 2

I tried the @stmn solution but it did not work for me. Taking advantage of the idea of it, I was able to make it work as follows:

$inputs.iCheck({
    checkboxClass: 'icheckbox_square-orange',
    radioClass: 'icheckbox_square-orange'
}).on('ifChecked ifUnchecked', function(){
    $(this)[0].dispatchEvent(new Event("change"));
});

Answer 3

I created different solution which fit better for me because it works globally for all inputs and there is no need to specify what to do after event - works like proxying iCheck event to Vue. Tested with Vue 2.x and v-model.

    var $inputs = $('[type=checkbox], [type=radio]');
    $inputs.iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue'
    }).on('ifChecked ifUnchecked', function(){
        var inputEvent = document.createEvent('Event');
        inputEvent.initEvent('click');
        $(this).get(0).dispatchEvent(inputEvent);

        setTimeout(function(){ $inputs.iCheck('update'); }, 0)
    });