iCheck不适用于VueJS

Question

当iCheck盒在没有VueJS绑定的情况下正常工作时，我遇到了一个奇怪的情况。但是，当我选中一个框时，它根本没有链接到Vue。

HTML代码：

<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>

“联合来文法典”：

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

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

我可以使用该复选框，而且它似乎没有触发能够捕获新值的事件。

您可以从：http://codepen.io/techcater/pen/mmdLOX检查我的示例代码

谢谢,

Answer 1

iCheck在您的复选框上创建了一个<div/>，因此单击此复选框不会“真正地单击复选框”。

(使用iCheck复选框上的检查元素来验证)

解决方案:在检查或取消选中项目时，从列表中使用iCheck回调和push/pop元素。

此解决方案适用于我:当单击复选框添加其值时，要访问数据，请使用Vue的$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);
    }    
  }
})

关于Codepen的例子，您可以通过使用iCheck的回调找到更好的解决方案。祝好运

Answer 2

我尝试了@stmn解决方案，但它对我无效。利用它的想法，我能够使它工作如下：

​

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

​

Answer 3

我创建了不同的解决方案，它们更适合我，因为它对所有输入都是全局工作的，并且不需要指定事件后该做什么--比如将iCheck事件代理到Vue。用Vue 2.x和v-模型进行了测试。

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