vueでjQueryのslideUp, slideDownを一瞬で実装しちゃう

jQueryのslideUp, slideDownをvueで作る際に、transitionを使用するやり方があったのですが、高さを指定しないといけない？とかなんとかでよくわからなくてやめちゃったのですが、
結論から言うとライブラリを使用する方法が死ぬほど簡単でした。

ライブラリインストール

vue-slide-up-downをインストールします

npm i vue-slide-up-down

インポートする

Laravelとvueをセットで使っているので、 僕はapp.jsというところでインポートします

import VueSlideUpDown from 'vue-slide-up-down'

Vue.component('vue-slide-up-down', VueSlideUpDown)

実際に使ってみる

<button class="toggle-button" @click="toggleActive">非表示切り替えボタン</button>
<vue-slide-up-down(:active="active" :duration="500")/>
  <div>activeの値によってここの表示がslideUpされたりslideDownされたりするよ</div>

こんな感じです。超簡単です。

あとはactiveの値をdataに持たせて、toggleActiveメソッドでactiveをtrueにしたりfalseにしたりしてあげればOKです

↓イメージ

method() {
    toggleActive() {
        this.active = !this.active
    }
}

以上です。瞬殺でした。