Question

当iCheck盒没有VueJS绑定时，我遇到了一个奇怪的情况。但是，当我检查一个盒子时，它根本没有链接到Vue。

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代码：

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 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进行测试。

import signal
    def signal_handler(signal, frame):
        pass
signal.signal(signal.SIGINT, signal_handler)

iCheck不适用于VueJS

3 个答案: