[英]Foundation orbit with v-for in a vue component
I have a foundation orbit
that requires some data from the database, this data includes the image captions and some text. 我有一个
foundation orbit
,需要从数据库中获取一些数据,这些数据包括图像标题和一些文本。 I am using a vue component
as follows: 我正在使用
vue component
,如下所示:
...
<template>
<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>
<div v-for="development in components.other_developments">
<ul class="orbit-container" style="height: 500px">
<h1 class="other-developments-orbit-title">{{development.name}}</h1>
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<p class="other-developments-orbit-text">{{development.description}}</p>
<a class="other-developments-orbit-button button" id="custom-button">VISIT WEBSITE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
<li class="is-active orbit-slide" data-use-m-u-i="false">
<img class="other-developments-image orbit-image" :src="development.image_url" alt="Space">
</li>
</ul>
</div>
</div>
</template>
...
I need to fetch all the information from an api, it fetches the first one and piles up the rest under it instead of sliding. 我需要从api中获取所有信息,它会获取第一个信息,并将其余信息堆积在其下而不是滑动。 Where can I place the
v-for directive
for it to slide with all the data. 我可以在哪里放置
v-for directive
使其与所有数据一起滑动。
我还没有找到,但是更好的解决方案是使用Slick Carousel
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.