I use bootstrap-vue. I took an example from the documentation - https://bootstrap-vue.js.org/docs/components/table/#table-body-transition-support. Everything works well. But if I replace the data in th cells with my data, the effect stops working. Why it happens? How do i fix this?
<template>
<div class="container">
<div class="row">
<div class="col-sm-12 chartjs">
<b-table
id="table-transition-example"
:items="itemsForTable"
:fields="fieldsForTable"
striped
small
primary-key="a"
:tbody-transition-props="transProps"
></b-table>
</div>
</div>
</div>
<script>
export default {
data: function () {
return {
fieldsForTable: [
{ key: 'a1', sortable: true },
{ key: 'b', sortable: true },
],
itemsForTable: [
{ a1: 2, b: 'Two'},
{ a1: 1, b: 'Three'}
],
transProps: {
name: 'flip-list'
}
};
},
computed: {
},
mounted() {
},
methods: {
}
}