LoginSignup
1
1

More than 5 years have passed since last update.

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

Posted at

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

スクリーンショット 2017-04-10 10.39.39.png

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1