Search code examples
vue.jstransitionbootstrap-vue

Vue js, bootstrap-vue. Does not work transition effect in table

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: {
    }
}

enter image description here

Solution

  • You also need to update primary-key to be a2. Without that it won't know which rows in the updated table are equivalent to the rows in the original table, so it can't perform the transition.

    The value of that field is used to generate the Vue key for each row. It isn't exactly the same as the underlying Vue key, the table adds a prefix and suffix, but for most practical purposes you can think of them as being the same thing.