How can I combine vuejs v-for with Unslider - vue.js

Question

Recently, I've encountered a problem when trying to combine vuejs's v-for wih Unslider
My 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>
My Js for unslider
jQuery(document).ready(function($) {
$('.my-slider').unslider({
autoplay:true
});
});
v-for and unslider works well when they are seperated. But I want to combine them. It would be greatful if anyone can help me out of this.

Answer 1

You can wrap unslider plugin as vue component and use it.
//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: I am unable to get css working. No idea why it is not working.