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. Dietbepis1
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 4
    • Best 0
    • Groups 0

    Dietbepis1

    @Dietbepis1

    0
    Reputation
    1
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Dietbepis1 Follow

    Latest posts made by Dietbepis1

    • Ref on quasar component does not trigger gsap animations

      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!

      posted in Help
      D
      Dietbepis1
    • RE: Q-carousel-slide does not show until clicked on or swiped

      @charlieknoll Yep! Well put.

      posted in Help
      D
      Dietbepis1
    • RE: Q-carousel-slide does not show until clicked on or swiped

      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!

      posted in Help
      D
      Dietbepis1
    • Q-carousel-slide does not show until clicked on or swiped

      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!

      posted in Help
      D
      Dietbepis1