Vue.js. Почему при обновлении через Ajax, данные каждый раз переписываются, даже если они не изменились?

Question

[Игорь Че]

Пишу маленькое приложение на vue.js - всплывающие уведомления.
Данные запрашиваю ajax'ом. И сейчас получается, что при каждом запросе, данные в шаблоне перерисовываются. Пытался завернуть список сообщений в transition-group, но получаю не тот эффект который ожидал, из-за того что данные каждый раз перезаписываются.
Как сделать чтобы обновлялись только изменившиеся элементы?

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:
Обнаружил сейчас что если убрать transition-group и v-bind:key="it", то элементы не перерисовываются. Обновляются только при изменении.
Если добавить transition-group, то он требует v-bind:key. Я не очень понимаю что делает v-bind, и что конкретно нужно указать в нем в данном случае.

Answer 1

[Evgeny Kulakov]

А имеет элемент it какой-то свой уникальный id? Если да, то может попробовать его использовать в v-bind:key. Похоже сейчас сюда постоянно попадает новый объект, что заставляет произвести полную перерисовку.

Comments

[Игорь Че]

Сейчас не задаю id, но задать не проблема.
Дополнил вопрос, новой информацией.

[Evgeny Kulakov]

Выдржка из доки:

Чтобы подсказать Vue, как отслеживать идентичность каждого элемента, позволяющую переиспользовать и перемещать существующие элементы, укажите уникальный атрибут key для каждого элемента. Идеальным значением key будет уникальный id сущности.

Т.е. когда вы присваивайте v-bind:key="it" - по сути это постоянное присвоение нового объекта, что заставляет элементы перерисовываться.

[Игорь Че]

Спасибо за разьяснения. Добавил уникальное значение. Теперь все работает как надо.

Answer 2

[Игорь Че]

Отвечу сам.
Изменил v-bind:key="it" на v-bind:key="it.st"
Полагаю значение it.st должно быть уникальным, а у меня они могут совпадать. Тем не менее так работает