Hey all,

I am using gsap to do animations on a site that I am working on and it appears that a ref attached to a q-btn does not trigger an animation; however, if I wrap the q-btn in a div and attach the ref to that, it works as expected. So, as an example:

// This does not work
<template>
  <q-btn
  ref="btn"
  >
    Buy
  </q-btn>
</template>

// This DOES work
<template>
<div ref="btn">
    <q-btn>
      Buy
    </q-btn>
</div>
</template>

<script>
  mounted () {
    const { btn } = this.$refs

     gsap.timeline()
    .from(btn, {some settings})
  }
</script>

Just curious why this would be the case or if I am forgetting something.

Thanks for the help!

@charlieknoll Yep! Well put.

Thanks @metalsadman. I initially did not understand your answer and I learned a bit about Vue’s reactivity system. Ultimately it appears that my problem was the carousel’s v-model. It was starting in an indeterminate state, but changing the keys on my slide components and setting the initial slide value to zero solved the problem. Thanks again for the help!

Hey everyone,

I am using the q-carousel to display q-slides with user reviews and I am getting strange behavior where once the component renders, only the navigation bubbles at the bottom show up until I click on one of the bubbles- then I can freely navigate through the slides with a swipe or by clicking on the arrow icons. I am hoping someone can look at my code and tell me if I am making a mistake somewhere or if this is a bug.

My HTML

<q-carousel
              v-model="slide"
              transition-prev="scale"
              transition-next="scale"
              swipeable
              infinite
              animated
              control-color="bright"
              navigation
              padding
              arrows
              height="500px"
              class="shadow-1 rounded-borders review__carousel"
            >
              <q-carousel-slide
                v-for="(review) in reviews"
                :key="review.rdate"
                :name="review.rdate"
                class="column no-wrap flex-center"
              >
                <div class="row">
                  <div
                    v-if="review.rating"
                    class="col text-center"
                  >
                    <q-icon
                      v-for="star in review.rating"
                      :key="star"
                      name="fas fa-star"
                      size="25px"
                      class="review__icon"
                    />
                    <p>on {{review.reviewDate}}</p>
                  </div>

                </div>
                <div
                  v-if="review.comments"
                  class="text-center"
                >
                  {{ review.comments }}
                </div>
                <div class="q-mt-md text-center">
                  - {{ review.reviewer.firstName + " " + review.reviewer.lastName }}
                </div>
              </q-carousel-slide>

            </q-carousel>

My Script:

export default {
data () {
    return {
      slide: 'style',
      reviews: []

    }
  },
  mounted: async function () {
    await axios.get('[review api]')
      .then((res) => {
        this.reviews = [...res.data]
      })
      .catch((err) => console.err(err))
  }
}

I appreciate the help!