iCheckはVueJSで動作しません

Question

VueJSバインディングなしでiCheckボックスが正常に動作すると、奇妙な状況に陥ります。しかし、ボックスをチェックすると、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プッシュ/ポップの要素かをチェックしたり、項目のチェックを外します。

このソリューションは、私の仕事： をチェックボックスをクリックすると、それはあなたのデータの使用にヴューの$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

すべての入力に対してグローバルに機能し、イベントの後に何をする必要がないので、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) 
    });