vue.js - 如何将 vuejs v-for 与 Unslider 结合使用

Question

最近在尝试结合vuejs的v-for和Unslider时遇到了一个问题

我的 HTML

  <div class="my-slider" >
       <ul>
          <li>
              <div class="show-box" v-for="item in soloColImgs" track-by="$index">
              <img v-bind:src="item.imgUrl"/>
              <a v-bind:href="item.itemUrl" target="_blank"></a>
              </div>
          </li>
       </ul>
  </div>

我的 Js for unslider

jQuery(document).ready(function($) {
    $('.my-slider').unslider({
        autoplay:true
    });
});

v-for 和 unslider 分开时效果很好。但我想把它们结合起来。如果有人能帮助我解决这个问题，那就太好了。

Answer 1

您可以将 unslider 插件包装为 vue 组件并使用它。

//code using the un-slider component
<div class="browser">
  <un-slider>
    <ul>
           <li v-for="i in 6"> {{ i }} is an item </li>
      </ul>
  </un-slider>  
</div>

//defining template for unslider component
<template id="unslider-template">
<div class="my-slider" v-el:slider>
  <slot></slot>
</div>
</template>


//initialize vue
new Vue({
    el:".browser",
  components:{

   // as it is a simple component, I have written the code here.
   // you should not write it here.
   UnSlider: {
    template:"#unslider-template",
    ready: function(){
     jQuery(this.$els.slider).unslider();     
    }
   },
  }
});

演示

PS：我无法让 css 工作。不知道为什么它不起作用。