For my v-for loop that generates a list of flights, I have implemented functionality where the user can click on a "flight details" button to send an AJAX request to the server and append new information to the results array. To update the view accordingly, I am using the $set method:
this.results.displayed.$set(key, _.extend({}, row, detail.items));
In this context, the key represents the $index of the array object, row is the object itself, and detail.items contain the fresh data related to price details.
After the view is updated, I need to make some changes to certain classes. Upon researching online, I came across a solution like this:
this.$nextTick(function () {
$(el.target).toggleClass('load');
});
Here, el.target refers to the clicked button. However, the issue I faced was that toggleClass executes before the view update when it should occur after the update.
The following code snippet presents the complete AJAX call for obtaining price details:
$.ajax({
method: 'POST',
dataType: 'json',
url: this.base_info.url + 'getpricedetail?token=' + this.token,
data: {price_id : price_id},
beforeSend: function () {
$(el.target).addClass('load');
}.bind(this),
success: function (detail) {
this.results.displayed.$set(key, _.extend({}, row, detail.items));
this.$nextTick(function () {
$(el.target).siblings('.prices').addClass('open');
});
}.bind(this),
error: function () {
data.vars.loading = false;
}.bind(this)
});