QCarousel using v-for
-
(Revised Post with Answer): Using QCarousel with the v-for iteration was giving me problems - which were solved thanks to Scott Molineri with following link:
https://codepen.io/smolinari/pen/VwZOBYx?editors=1010 << Thank you, Scott - worth a cup of coffee!
A look at this simple fix, no need to read the whole thread (I had thought v-model was not needed):<!–
Forked from:
https://quasar.dev/vue-components/carousel#Example--Image-slides
–>
<div id=“q-app”>
<div class=“q-pa-md”>
<q-carousel
animated
v-model=“slide”
arrows
navigation
infinite
>
<q-carousel-slide v-for=“slide in slides”:key=“slide.id”:name=“slide.id” :img-src=“slide.url” ></q-carousel-slide>
</q-carousel>
</div>
</div>
Script:
const slides = [
{
id: 1,
url: ‘https://cdn.quasar.dev/img/mountains.jpg’
},
{
id: 2,
url: ‘https://cdn.quasar.dev/img/parallax1.jpg’
}
]
And add to data:
data () {
return {
slide: 1,
slides
}
} -
You don’t need “this” in the template. This is basic Vue knowledge.
Sorry for the mix in version content, but it’s too late to “purge” now.
Scott
-
Thanks for your prompt response, Scott. I added the this. parameter among the many things tried to resolve the problem; sorry not to remove it prior to the post.
However, removing the “this.” does not clear the “missing value” problem. How should the name parameter be set - is it required for the carousel? What I am thinking is take the Autoplay example [or one with captions] in QCarousel doco and implement it with the v-for construct; alternatively, could this thread be removed and replaced with the code that would apply to that demo? I think something needs to be done in the forum to get rid of old material and net-out the answers. Thanks for any assistance. -
-
Thanx again - see revised post, hope ok. You should be seeing a cup of coffee.
(Pls check: Link on Patreon "go back to Scott Molinari’s Page is broken, gets 404)
-
Thanks for the coffee!
Is your issue resolved now?
Scott
