vue 组件中带有 v-for 的基础轨道答案

【问题标题】：Foundation orbit with v-for in a vue componentvue 组件中带有 v-for 的基础轨道
【发布时间】：2017-01-11 08:42:47
【问题描述】：

我有一个foundation orbit，它需要数据库中的一些数据，这些数据包括图像标题和一些文本。我正在使用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>&#9664;&#xFE0E;</button>
            <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</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>
...

我需要从 api 中获取所有信息，它会获取第一个信息并将其余信息堆积在它下面而不是滑动。我在哪里可以放置 v-for directive 以便它与所有数据一起滑动。

【问题讨论】：

标签： javascript zurb-foundation vue-component vuejs2 orbit

【解决方案1】：

我还没有找到这个，但更好的解决方案是使用Slick Carousel

【讨论】：