我遇到了 VueJS 渲染的问题。我正在为每个 ajax 获取数据。在初始渲染时,表格行被正确渲染,但在重新渲染更新的元素时,它不会被正确渲染。
这是一张图片: 渲染表
如您所见,第 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/