@rstoenescu cool, thanks for the update
M
Latest posts made by moritzewert
-
RE: Dynamic Slider
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