Q-carousel-slide does not show until clicked on or swiped

[Dietbepis1]

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!

[metalsadman]

@dietbepis1 sounds like a reactivity issue, try array push or splice.

[Dietbepis1]

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!

[charlieknoll]

@dietbepis1 You got it, you set v-model=“slide” and in your data you set slide to ‘style’. It looks like it should be a value such as review.rdate if you want the slide index to start at a particular slide.

[Dietbepis1]

@charlieknoll Yep! Well put.