2
votes

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

1
Did the answer provided already help enough?FaZe Unempl0yedd

1 Answers

4
votes

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.