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>

JS代码：

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 callback 并从列表中推送/弹出元素。

这个解决方案对我有用： 当点击复选框添加它的值时，要访问您的数据，请使用 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);
    }    
  }
})

The example on 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-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)
    });