이 기사에서 쓰기

소스 게시.

이 기사를 쓰는 이유

Nuxt로 어플리케이션을 작성하고 있을 때, 「슬라이더를 실장하고 싶지만, 모듈을 넣을 정도가 아니다,,」라고 생각했을 때, 몇개의 기사를 보았습니다만, 이하와 같이 실장되고 있는 것이 많았습니다.

<div>
  <transition :name="slider">
    <div :key="idx" v-for="(content, idx) in contents" v-if="content.id== idx"/>
       // 中身
    </div>
  </transition>
</div>

이 구현은 잘 표시되지만 하나의 문제가 있습니다. 그것은 v-if와 v-for를 동시에 사용한다는 것입니다.
Vue.js 문서에서 볼 수 있듯이 이것은 더 이상 사용되지 않습니다. ( Vue.js 문서 )
그래서 타이틀대로 v-for와 v-if를 동시에 이용하지 않는 슬라이더를 구현해 보았습니다.

출처

See the Pen vue-slider by RyoTa ( @RyoTa0222 )
on CodePen .

개량의 여지 등 있을지도 모릅니다. 코멘트 주시면 다행입니다!