Carousel in template

Dashboard
1

I wanted to understand the Vuetify templates a little better. I wanted to do a carousel:
In my data I have an array of objects image-url contains the URL of the images.

This is what I put into the template:

<template>
  <v-carousel>
    <v-carousel-item v-for="item in msg.payload"
      src="item.image-url"
      cover
    ></v-carousel-item>
  </v-carousel>
</template>

The controls for the carousel display correctly (left right arrow and even the dots show the number of images), but the images themselves do not show up.

Did I misunderstand the use of the v-for? If I want to display the images statically, I don't need to add any scripts, right?

2

I understand the issue is with src="item.image-url" just can't figure out what it should be. The examples I have seen add value to HTML not to an attribute value. I thought src={{ item.image-url }} but does not work either.

3

rename to be "path" or something with letters only.
then

src="item.path"

should do the trick

4

No, unfortunately that did not help...

5 
<v-carousel-item v-for="item in msg.payload"  :src="item.path" cover></v-carousel-item>

that src should be

:src
6

If you haven't changed the property name as suggested by @hotNipi you can address it using square bracket notation

:src="item['image-url']"

Remember to start bound attribute with a colon e.g. :src

7

Thanks a lot, it was the colon in front of src that was missing.

I modified the template and also added the key attribute to the v-carousel-item. Now, I should be able to use the watch function to send a message when the user cycles through the images? How can I figure out how to do that? I guess I need some basic understanding of vue.js? What would you recommend to read for this?

8

My (untested) thoughts here would be to try a v-model onto the v-carousel - the Vuetify (the widget library we use under the covers) documentation for the Carousel (link) suggests that this is possible, and my guess would be that it's the index of the carousel-item or something like that.

<template>
  <v-carousel v-model="index">
      ...
  </v-carousel>
</template>
<script>
export default {
    data () {
        return {
            index: 0
        }
    },
    watch: {
        index: function () {
            // do stuff
        }
    }
}
}
</script>
9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.