Answer the question
In order to leave comments, you need to log in
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'];
}
});
}
}
});
<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>
Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question