slideToggle() Vue.js responsive

Many people who migrate from jQuery to Vue.js trying to find solution for slideUp or slideDown method... And some people try to write a script for height animation, but its wrong method cuz causing coding difficulties in responsive.

Each js language has a simpler method:

<template lang="pug">
    .spoiler(:class="{'spoil-active': active}")
        button.spoiler-button(@click="active = !active") {{ title }}
        transition(name="accordion-item" @enter="startTransition" @after-enter="endTransition" @before-leave="startTransition" @after-leave="endTransition")

export default {
    name: "spoiler",
    data() {
        return {
            active: false
    props: {
        title: {
            type: String,
            default: 'Open spoiler'
    methods: {
        startTransition(el) {
   = el.scrollHeight + 'px'
        endTransition(el) {
   = ''

If you look in detail at the code, you will see that for the slideToggle method, we use the scroll-height animation that we erase after it ends.

And CSS:

.accordion-item-enter-active, .accordion-item-leave-active {
    will-change: height;
    transition: height 0.2s ease;

.accordion-item-enter, .accordion-item-leave-to {
    height: 0 !important;