# Carousel in template

**URL:** <https://discourse.nodered.org/t/carousel-in-template/85235>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [5 February 2024 22:13 UTC](https://discourse.nodered.org/t/carousel-in-template/85235 "2024-02-05T22:13:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [5 February 2024 22:13 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/1 "2024-02-05T22:13:07Z")

</div>

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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [5 February 2024 22:18 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/2 "2024-02-05T22:18:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 February 2024 22:58 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/3 "2024-02-05T22:58:54Z")

</div>

> [@nygma2004](#):
>
> `.image-url"`

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

```auto
src="item.path"

```

should do the trick

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [5 February 2024 23:02 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/4 "2024-02-05T23:02:56Z")

</div>

No, unfortunately that did not help...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 February 2024 23:03 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/5 "2024-02-05T23:03:38Z")

</div>

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

```

that src should be

```auto
:src

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 February 2024 23:19 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/6 "2024-02-05T23:19:08Z")

</div>

> [@nygma2004](#):
>
> `src="item.image-url"`

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

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

```

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

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [6 February 2024 07:03 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/7 "2024-02-06T07:03:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 February 2024 11:41 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/8 "2024-02-06T11:41:06Z")

</div>

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](https://vuetifyjs.com/en/api/v-carousel/#props-model-value)) suggests that this is possible, and my _guess_ would be that it's the index of the `carousel-item` or something like that.

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 February 2024 11:41 UTC](https://discourse.nodered.org/t/carousel-in-template/85235/9 "2024-02-20T11:41:32Z")

</div>

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