[Vuejs]-How can I combine vuejs v-for with Unslider

by

0👍

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.

Leave a comment