iCheck doesn't work with VueJS

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,

Answers:

Answer

iCheck created a <div/> over your checkbox, so by clicking on this checkbox you're not "really clicking on the checkbox". Inspect Element over iCheck 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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.