Dynamic Slider

xgvargas

Hello. Any way to use v-if or add/remove slide slots to a q-slider after its creation?

rstoenescu

I think Jon answered this on Gitter. Got an idea how to make this dynamic though. Will try it out soon.

moritzewert

Hey there,

I’m relatively new to this framework (started using it two days ago) and as I learn new stuff I like to write simple applications, in this case a time tracker. I stumbled upon this question when I tried to add slides dynamically. After looking at the source files I had an idea for an easy solution to add slides after its creation, this should also work with the v-if directive.

What I wanted to do:
My main interface is a q-slider with two set slides wich stay visible all the time, a ‘settings’-slide and a ‘add new tracker’-slide. In between those two slides there might be multiple slides representing a single tracker from an array.

What I did:

// My TrackerSlider component for reference
...
<q-slider ref="slider" :arrows="showArrows" dots class="text-white full-height">

    //That's the settings slide, no magic here
    <div slot="slide" class="bg-tertiary centered">
        <button class="primary circular big"><i @click="someMethod()">history</i></button>
        <button class="primary circular big"><i @click="someMethod()">settings</i></button>
    </div>

    //Here come the dynamic slides
    <tracker-slide slot="slide" :tracker="tracker" v-for="tracker in trackers"></tracker-slide>

    ///The other 'static' slide
    <div slot="slide" class="bg-tertiary centered">
        <button class="primary circular big"><i @click="addTracker()">add</i></button>
    </div>
  </q-slider>

// And my script
export default {
...
data () {
    return {
        trackers: []
    }
},
methods: {
    addTracker () {
    // Here I'm adding a new tracker to the array, q-slider get's a little nervous here
        this.trackers.push({
            title: 'Work',
            start: 0,
            end: 0,
            paused: 0,
            breaks: []
      })
      // Here I inform the component of how many slides should be there (two fixed + how many trackers there are)
      this.$refs.slider.slidesNumber = this.trackers.length + 2
    }
  }
}

This solution is simple, but it seems to work when you know how many slides you try to show

rstoenescu

@moritzewert upgrade to Quasar v0.13.2. No need to manually set slidesNumber anymore.

moritzewert

@rstoenescu cool, thanks for the update

No More Posting New Topics!

Dynamic Slider