Level 63
Have you already tried any transitions or animations ?
1 like
Dec 28, 2022
3
Level 8
Fadeout row
I have a VueJS table where I have a delete button. I would like to fade out a row after deletion. My code is like below.
<template>
<table>
<thead class="thead-light">
<tr>
<th>date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="set-rows">
<tr :key="time.id" v-for='time in times'>
<td>{{ date }}</td>
<td>
<button type="button" class="btn btn-sm btn-danger" v-on:click="deleteTime(time.id)">
<i class="tio-delete-outlined"></i>
</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
methods:{
deleteTime: function (time_id) {
axios.post('/api/v1/deleteTime/' + time_id)
.then(function (response) { });
}
},
}
</script>
Level 8
@vincent15000 Thanks. How can I select a row to Fade out ?
1 like
Level 63
@afoysal Have you seen the first code in the documentation ?
<button @click="show = !show">Toggle</button>
<Transition>
<p v-if="show">hello</p>
</Transition>
You can for example hide the row before deleting the data.
<Transition>
<tr v-if="show[index]">
<td>
<button @click="delete(id, index)">Delete</button>
</td>
</tr>
</Transition>
As you have several rows, you need a specific variable for each one, you can for example use an array of variables.
Then in the delete method, you can manage to toggle the show[index] value and then delete the row in the database.
Please or to participate in this conversation.