No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. moritzewert
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 2
    • Best 0
    • Groups 0

    moritzewert

    @moritzewert

    0
    Reputation
    342
    Profile views
    2
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    moritzewert Follow

    Latest posts made by moritzewert

    • RE: Dynamic Slider

      @rstoenescu cool, thanks for the update

      posted in Framework
      M
      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

      posted in Framework
      M
      moritzewert