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复选框上使用inspect元素进行验证)

解决方案:在检查或取消选中项目时,使用列表中的iCheck回调和推/弹元素.

这个解决方案对我有用:当点击复选框添加它的值时,使用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"));
});