iCheck 不适用于 VueJS
iCheck doesn't work with VueJS
当 iCheck 框在没有 VueJS 绑定的情况下工作正常时,我遇到了一个奇怪的情况。但是,当我选中一个框时,它根本不会 link 到 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
谢谢,
iCheck 在您的复选框上创建了一个 <div/>
,因此通过单击此复选框您不是 "really clicking on the checkbox"。
(在您的 iCheck 复选框上使用检查元素进行验证)
解决方法:
选中或取消选中项目时,使用列表中的 iCheck callback 和 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);
}
}
})
The example on Codepen,你可以通过玩iCheck的回调找到更好的解决方案。祝你好运
我创建了更适合我的不同解决方案,因为它适用于所有输入,并且无需指定事件发生后要做什么 - 就像将 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)
});
我尝试了@stmn 解决方案,但它对我不起作用。利用它的想法,我能够使其工作如下:
$inputs.iCheck({
checkboxClass: 'icheckbox_square-orange',
radioClass: 'icheckbox_square-orange'
}).on('ifChecked ifUnchecked', function(){
$(this)[0].dispatchEvent(new Event("change"));
});
当 iCheck 框在没有 VueJS 绑定的情况下工作正常时,我遇到了一个奇怪的情况。但是,当我选中一个框时,它根本不会 link 到 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
谢谢,
iCheck 在您的复选框上创建了一个 <div/>
,因此通过单击此复选框您不是 "really clicking on the checkbox"。
解决方法: 选中或取消选中项目时,使用列表中的 iCheck callback 和 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);
}
}
})
The example on Codepen,你可以通过玩iCheck的回调找到更好的解决方案。祝你好运
我创建了更适合我的不同解决方案,因为它适用于所有输入,并且无需指定事件发生后要做什么 - 就像将 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)
});
我尝试了@stmn 解决方案,但它对我不起作用。利用它的想法,我能够使其工作如下:
$inputs.iCheck({
checkboxClass: 'icheckbox_square-orange',
radioClass: 'icheckbox_square-orange'
}).on('ifChecked ifUnchecked', function(){
$(this)[0].dispatchEvent(new Event("change"));
});