所以我的js代码是:
const storage = new Vue({
el: '#full-table',
delimiters: ['[[', ']]'],
data: {
events: [],
counter: 0,
},
methods: {
eventCounter: function() {
this.counter += 1;
return this.counter;
},
toTime: function(raw_time) {
console.log(raw_time)
return moment(raw_time * 1000).format('YYYY-MM-DD HH:mm:ss');
},
preprocessData: function(d) {
if (d["args"]["data"]) {
d["data"] = d["args"]["data"];
delete d["args"]["data"];
}
return d;
},
getData: function(query) {
let _this = this
$.get(events_api + 'json?' + query).done(function(new_data) {
data = new_data.data.map(
(item) => _this.preprocessData(item))
_this.events = data.slice(0, data.length);
console.log(_this.events)
}).fail(function(_, _, statusCode) {
$("#error").html(statusCode);
});
},
},
})
storage.getData('somequery')
我的 html 是:
<div id="full_table">
...
<tbody id="table_data">
<tr v-for="event in events" :key="event.time">
<td>[[ eventCounter() ]]</td>
<td>[[ toTime(event.time) ]]</td>
<td class="data">[[ event.data || '-' ]]</td>
<td>[[ event.action || '-' ]]</td>
<td>[[ event.desc || '-' ]]</td>
<td>[[ event.args || '-' ]]</td>
</tr>
</tbody>
...
</div>
console.log(_this.events) - 显示一切正常(例如，我们得到了 2 个项目的数组)
但是 console.log(raw_time) 有很多重复(假设 FirstTime 来自数组的第一个元素，SecondTime从第二个开始):
FirstTime
SecondTime
FirstTime
SecondTime
...
并警告:
[Vue warn]:组件渲染函数中可能存在无限更新循环。
如何防止代码更改后无限循环数组？
最佳答案
所以问题出在模板 - eventCounter() 中的 v-for 内的函数调用中更改数据。
我有一个响应式(Reactive) counter 变量，在 v-for 的每次迭代中，它都会增加 1，之后 Vue 开始重新渲染页面等等。真可惜!
关于javascript - 数组分配后Vue中的无限更新循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52456721/