iCheckとVue.jsに翻弄された件について


iCheckVue.jsを使用して、
チェックボックスのリストを動的に表示していたら困った話とその解決策について少しだけ。

やりたいのは↑みたいな感じのリストを動的に出したい(画像が大きすぎるな(ー_ー;)

HTMLはこんな感じ

index.html
<ul v-for="hoge in hoges">
    <li>
        <input type="checkbox" name="checkbox" v-bind:value="hoge" v-model="checkedNames">
    </li>
</ul>

まず初めにやったこと

script.coffee
# init内に設定を記載
init: ->
  $('.checkbox').iCheck
    checkboxClass: 'icheckbox_minimal-red'

これだと初回表示時は上手く行きますが、
ページング等を挟むと上手くiCheckが反映されません(・・;)

対応策

script.coffee
# watchに書く
watch:
  'checkedNames': ->
    $('.checkbox').iCheck
      checkboxClass: 'icheckbox_minimal-red'

これで問題なく反映されました
そもそもこの2つの組み合わせはNGみたいなことはあまり考慮していないので、
問題等もあるかと思いますが、ご容赦下さいm(_ _)m