Vuetify Swipeout

A swipe out example built with Vue

Install Swiper

npm install swiper --save

Add v-list component

<!-- App.vue -->
<template>
  ...
  <v-list>
    <template v-for="(item, index) in items">
      <custom-component
              :id="`item-${item}`"
              @transitionEnd="customFunction"
              ...
      />
      <v-divider...></v-divider>
    </template>
  </v-list>
  ...
</template>

<script>
import CustomComponent from '@/components/CustomComponent.vue'
export  default {
    components: {
        'custom-component': CustomComponent
    },
    methods: {
        transitionEnd () {
            // Callback from SwipeoutItem after transition
        ...
        }
    }
}
</script>

Import and configure Swiper in the custom component

<!-- CustomComponent.vue -->
<template>
  <div :id="id" class="swiper-container">
    <div class="swiper-wrapper">
      <v-list-tile class="swiper-slide error"></v-list-tile>
      <v-list-tile class="swiper-slide">
        <!-- custom content here -->
      </v-list-tile>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.min.css'
import { Swiper } from 'swiper/dist/js/swiper.esm.js'

export default {
    props: ['id'],
    mounted () {
        const self = this
        const el = '#' + this.id

        // Initialize Swiper
        const swiper = new Swiper(el, {
            initialSlide: 1,
            resistanceRatio: 0,
            speed: 150
        })

        // Event will be fired after transition
        swiper.on('transitionEnd', function () {
            if (this.activeIndex === 0) {
                self.$emit('transitionEnd')
                // Destroy slider instance and detach all events listeners
                this.destroy()
            }
        })
    }
}
</script>