Как совместить vuejs V-для с Unslider

Question

Недавно я столкнулся с проблемой при попытке объединить vuejs V-для Жека 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 для unslider

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

v-for и unslider хорошо работают, когда они разделены. Но я хочу их комбинировать. Было бы здорово, если бы кто-нибудь мог мне помочь.

Answer 1

Вы можете обернуть плагин unlider как компонент 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();  
    } 
    }, 
    } 
}); 

Demo

PS: Я не могу получить CSS работу. Не знаю, почему он не работает.