Question

所以我的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]: You may have an infinite update loop in a component render function.

如何防止代码在更改后无限循环数组？

Answer 1

因此问题出在模板v-for的{{1}}内部的函数调用中更改数据。

我有一个反应性eventCounter()变量，在counter的每次迭代中，它都增加了1，然后Vue开始重新渲染页面等等。真可惜！

分配数组后Vue中的无限更新循环

1 个答案: