vue-resource - VueJS 2 重新渲染表格

Question

我遇到了 VueJS 渲染的问题。我正在为每个 ajax 获取数据。在初始呈现时，表格行呈现正确，但在重新呈现更新的元素时，它没有正确呈现。

这是一张图片: Rendered Table

如您所见，第 1 行呈现正确。但是在重新渲染的第 2 行中，tds 被反转了。

这是我的代码:

var renderings = new Vue({
el: '#renderings',

data: function () {
    return {
        hasUnprocessedRenderings: false,
        renderings: {}
    };
},

methods: {
    clearData: function () {
        this.renderings = {};
    },

    updateData: function () {

        this.$http.get('http://some-url.com/renderings').then(function (response) {
            this.renderings = response.body.renderings;
            this.hasUnprocessedRenderings = response.body.hasUnprocessedRenderings;

            if (this.hasUnprocessedRenderings) {
                setTimeout(this.updateData, 10000);
            }
        });

    }
},

mounted: function() {
    this.updateData();
}

});

和我的 html:

<div id="renderings">
<table class="table table-striped table-hover table-bordered" style="margin bottom: 0;">
<thead>
<tr>
    <th>Personalisierung</th>
    <th>Format</th>
    <th>Download</th>
    <th></th>
</tr>
</thead>
<tbody>
<template v-for="rendering in renderings">
    <tr>
        <td>{{rendering.personalizationName}}</td>
        <td>{{rendering.renderTypeName}}</td>
        <template v-if="rendering.DOCUMENT_URL">
            <td><a :href="rendering.DOCUMENT_URL">{{rendering.DOCUMENT_URL}}</a></td>
            <td>
                <ul class="list-inline" style="margin-bottom: 0;">
                    <li><a :href="'http://some-url.com?pid='+rendering.PROCESS_ID" title="refresh"><i class="fa fa-refresh" aria-hidden="true"></i></a></li>
                    <li><a :href="'http://some-url.com?pid='+rendering.PROCESS_ID" title="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></a></li>
                </ul>
            </td>
        </template>
        <template v-else>
            <td colspan="2" style="text-align: center;">
                <i class="fa fa-cog fa-spin fa-fw"></i>
                <span>In Bearbeitung..</span>
            </td>
        </template>
    </tr>
</template>
</tbody>
</table>
</div>

所以我的问题是:如何修复该行是否正确重新呈现？

感谢您的帮助。 :-)

编辑#1: 这是一个 jsfiddle，问题也出现在这里:https://jsfiddle.net/dt1kt06g/

Answer 1

似乎这种行为是 Vue 虚拟 DOM 算法优化的副作用。发生更新时，Vue 会尽量减少元素移动，而是重用和修补现有的 DOM 节点。

当您在数据更新后检查 JSFiddle 中生成的 HTML 时，您会注意到最后一个 <td>在第二个 <tr>仍然具有属性 colspan="2" style="text-align: center;" ，这给了我们一个暗示，这个 <td> v-else 中先前呈现的“进行中”单元格中的元素被错误地重用了. (我不确定这是否可以被描述为 Vue 中的错误...)

无论如何，这个问题有一个解决方法:Vue 有特殊的 key该属性为节点差异算法提供了有关如何处理元素的提示(see documentation)。在您的示例中，将 key 添加到 <td>在v-else分支就足够了:

<template v-else>
    <td colspan="2" style="text-align: center;" :key="rendering.PROCESS_ID">
    ...

这是一个 fixed version你的 JSFiddle。