vue.js - Vue js，bootstrap-vue。在表中无效的过渡效果

Question

我使用boots-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。没有它，它将不知道更新后的表中的哪些行与原始表中的行等效，因此它无法执行过渡。

该字段的值用于为每一行生成Vue key。它与基础Vue key并不完全相同，该表添加了前缀和后缀，但是出于大多数实际目的，您可以将它们视为同一东西。