vue.jsでjqueryのpluginを使ってみる

業務でIE9〜の案件が降ってきたので、vue.jsを使ってみた。
よくあるスライド切替をvue.js + jQuery + jQuery.bxSliderで。

スライド画像が繰り返される部分にv-repeatを設定

1
2
3
ul(id='slide')
  li(v-repeat='photos')
    img(src="{{photo}}", alt="{{title}}")

vue.jsで要素を描画してからjQueryプラグインを適用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var slide = new Vue({
  el: '#slide',
  data: {
    photos: [
      {
        "photo": "画像1のパス",
        "title": "画像1の名前"
      },
      {
        "photo": "画像2のパス",
        "title": "画像2の名前"
      }
    ]
  }
});
jQuery("#slide").bxSlider();

これで行けました。