vue 구성 요소에서 v-for가있는 기초 궤도

Question

데이터베이스의 일부 데이터가 필요한 foundation orbit이 있는데이 데이터에는 이미지 캡션과 일부 텍스트가 포함되어 있습니다.

내가 API의 모든 정보를 가져 오기 위해 필요

... 
<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> 
... 

, 그것은 슬라이딩 대신 그 아래 첫 번째와 더미까지 나머지를 가져 오는 다음과 같이 나는 vue component을 사용하고 있습니다. 모든 데이터와 함께 슬라이드하려면 v-for directive을 어디에 둘 수 있습니까?

Answer 1

아직 찾을 수 없지만 더 나은 해결책은 Slick Carousel

입니다.