vue-swipe-actions component

<swipe-list
    ref="list"
    class="card"
    :disabled="!enabled"
    :items="mockSwipeList"
    item-key="id"
    @swipeout:click="itemClick"
>
    <template v-slot="{ item, index, revealLeft, revealRight, close }">
        <!-- item is the corresponding object from the array -->
        <!-- index is clearly the index -->
        <!-- revealLeft is method which toggles the left side -->
        <!-- revealRight is method which toggles the right side -->
        <!-- close is method which closes an opened side -->
        <div class="card-content">
            <!-- style content how ever you like -->
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <span>{{ index }}</span>
        </div>
    </template>
    <!-- left swipe side template and v-slot:left="{ item }" is the item clearly -->
    <!-- remove if you dont wanna have left swipe side  -->
    <template v-slot:left="{ item, close }">
        <div class="swipeout-action red" title="remove" @click="remove(item)">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-trash"></i>
        </div>
        <div class="swipeout-action purple" @click="close">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-close"></i>
        </div>
    </template>
    <!-- right swipe side template and v-slot:right"{ item }" is the item clearly -->
    <!-- remove if you dont wanna have right swipe side  -->
    <template v-slot:right="{ item }">
        <div class="swipeout-action blue">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-edit"></i>
        </div>
    
    </template>
    <template v-slot:empty>
        <div>
            <!-- change mockSwipeList to an empty array to see this slot in action  -->
            list is empty ( filtered or just empty )
        </div>
    </template>
</swipe-list>