I
I
Igor Che2017-04-07 12:32:29
JavaScript
Igor Che, 2017-04-07 12:32:29

vue.js. Why is the data rewritten each time when updating via Ajax, even if it hasn't changed?

I am writing a small application on vue.js - pop-up notifications.
Requesting data with ajax. And now it turns out that with each request, the data in the template is redrawn. I tried to wrap the list of messages in a transition-group, but I don't get the effect I expected, due to the fact that the data is overwritten each time.
How can I make it so that only changed elements are updated?
Vue.js:

alarm_app = new Vue({
        delimiters: ['{*', '*}'],
        el: '#alarm-app',
        data: {
            data: [],
            delta: []
        },

        created() { this.getData(); },

        methods:{
            // Получаем данные для уведомлений
            getData: function() {
              $.ajax({
                url: '/check-state/',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                processData: false,
                data: JSON.stringify(this.data),
                success: function (data) {
                    alarm_app.data = JSON.parse(data['newstate']);
                    alarm_app.delta = data['delta'];
                }
              });
            }
        }
    });

HTML:
<div id="alarm-app">
        <div v-if="delta != ''">
            <transition-group name="fade" tag="div">
            <div v-for="it in delta" v-bind:key="it">
                <div class="obj-name">{* it.object_name *}</div>
            </div>
            </transition-group>
        </div>
    </div>

UPD:
I found out now that if you remove the transition-group and v-bind:key="it", then the elements are not redrawn. Updated only when changed.
If you add a transition-group it requires v-bind:key. I don't really understand what v-bind does, and what specifically needs to be specified in it in this case.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Evgeny Kulakov, 2017-04-07
@chewarer

Does the it element have its own unique id? If yes, then you can try to use it in v-bind: key. It looks like now a new object is constantly getting here, which forces a complete redraw.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question