I am facing a situation where I need to retrieve additional data after the initial ajax call (in the mounted function) in Vue.js. I have placed the second ajax call within an if condition and inside the success function of the first ajax.
The data is successfully retrieved and visible in Vue Devtools in Chrome, but it is not being rendered in the view.
Pseudo Code:
var vm = new Vue({
el: '#messages',
data: {
participants: [],
active_conversation: '',
messages: []
},
methods: {
getParticipants: function () {
return this.$http.post('message/get-participants').then(
function (response) {
vm.participants = response.data.participants;
// if there is a conversation_id param in the URL
if (getUrlParameterByName('conversation_id')) {
// Second Ajax Call Occurs Here nested inside First Ajax
return vm.getConversationMessages(getUrlParameterByName('conversation_id'));
}
}
},
getConversationMessages : function(conv_id){
// Second Ajax Call to retrieve Conversation messages
// and display them, works with onClick event
return this.$http.post('message/get-messages/' + conv_id).then(
function (response) {
if (response.data.status == 'success') {
console.log(response.data.messages)
vm.messages = response.data.messages;
vm.$forceUpdate();
}
},
mounted: function () {
this.getParticipants()
}
})
The second Ajax call to fetch specific conversation messages works when triggered by an onclick event and displays the messages. However, when this function is called within the success callback of the first Ajax (getParticipants()), the data is fetched correctly as shown in DevTools, but the messages are not displayed on the screen. I have attempted to use vm.$set() without success.
Update:
The second Ajax call is functioning properly with no errors, and the messages data property is populated (confirmed through Vue DevTools). The only issue is that the messages are not displayed on the view! When manually clicking on a conversation, the second Ajax call is triggered again, and the messages become visible. I also tried using vm.$forceUpdate() after the second ajax call, but it did not resolve the issue.
Update2 html part(the bug is here!!)
<a vbind:id="conv.id" v-on:click="getMessages(conv.id)" onclick="$('#user-messages').addClass('active')">