I'm using vue.js and vue carousel-3d to show images of an API, however when I follow the example of the official website ( link ) only prints the first image and sends an error error in the terminal, this is the code I am using:
request to the API:
<script>
export default {
data: {
videos_p: []
},
mounted() {
axios.get("xxxxxxxxx")
.then(response => {
this.videos_p = response.data
})
}
}
</script>
and this is what I call the carousel 3-d for the sight:
<carousel-3d :disable3d="true" :space="365" :clickable="false" :controls-visible="true" :autoplay="true" :autoplay-timeout="4500">
<slide v-for="(slide, i) in videos_p" :index="i">
<img v-bind:src="slide.image_url" alt="">
<figcaption>
nota
</figcaption>
</slide>
</carousel-3d>
This is the message that is thrown from the navigator inspector:
"./ ~ / vue-loader / lib / template-compiler? {" id ":" data-v-3fef4902 "}! ./ ~ / vue-loader / lib / selector.js? type = template & index = 0! ./ app / javascript / packs / content / playlist.vue (Emitted value instead of an instance of Error): component lists rendered with v-for should have explicit keys. See link for more info. @ ./app/javascript/packs/content/playlist.vue 6: 2-193 @ multi (webpack) -dev-server / client? link ./app/javascript/packs/content/playlist.vue"
and this is the only image that you send me: