Vue js，bootstrap-vue。 table 中的过渡效果不起作用

Question

我使用 bootstrap-vue。我从文档中举了一个例子 - https://bootstrap-vue.js.org/docs/components/table/#table-body-transition-support。一切正常。但是，如果我用我的数据替换单元格中的数据，效果就会停止。为什么会这样？我该如何解决这个问题？

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

Answer 1

您还需要将 primary-key 更新为 a2。否则它将不知道更新后的 table 中的哪些行与原始 table 中的行等效，因此它无法执行转换。

该字段的值用于为每一行生成 Vue key。它与底层 Vue key 并不完全相同，table 添加了前缀和后缀，但对于大多数实际用途，您可以将它们视为同一件事。

Answer 2

在我的例子中，我忘了把 id="table-transition-example" 和它的工作现在像一个魅力。

Vue js，bootstrap-vue。 table 中的过渡效果不起作用

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

transition

vue.js

bootstrap-vue