この記事で書くこと

ソースの公開。

この記事を書く理由

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.

改良の余地等あるかもしれません。コメントいただければ幸いです！