Infinite update loop in Vue after array assignment

Question

So my js code is:

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')

And my html is:

<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) - displays that everything is ok (f.e. we got array of 2 items)

But then there are many repeats of console.log(raw_time) (assume that FirstTime is from the first elem of array and SecondTime from the second one):

FirstTime
SecondTime
FirstTime
SecondTime
...

And warning:

[Vue warn]: You may have an infinite update loop in a component render function.

How can I prevent the code from infinite looping array after it's changed?

A lot of stuff is going on there. Please provide a working example (e.g. a JSFiddle) with some test data. — Sphinxxx
– Sphinxxx, Commented Sep 22, 2018 at 21:01

Pavel B. · Accepted Answer · 2018-09-23 11:26:14Z

1

So the problem was in changing data in function call inside v-for in template - eventCounter().

I had a reactive counter variable and on each iteration of v-for it was incremented by 1 and after that Vue started to rerender page and so-on. What a shame!

edited Sep 23, 2018 at 11:26

answered Sep 23, 2018 at 11:19

Pavel B.

416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Infinite update loop in Vue after array assignment

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related