vue JS ajax внутри другого ajax получает данные, но не рендеринг

есть ситуация, что я должен получить дополнительные данные после моего первого ajax (в mounted функция) в vuejs я поставил второй ajax в if состояние и внутри success функция первого ajax!

он работает, и я вижу данные в Vue Devtools в chrome, но данные не отображаются в поле зрения.

Псевдо Код:

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 url
                        if (getUrlParameterByName('conversation_id')) {
                             // Second Ajax Is Called Here inside First Ajax
                             return vm.getConversationMessages (getUrlParameterByName('conversation_id')); // this ajax call is getting data but not showing in view  
                        }
                    }

            },

           getConversationMessages : function(conv_id){
              // Second Ajax Call to get Conversation messages
              // and showing them , works onClick
               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()
        }

})

второй вызов Ajax для получения определенных сообщений разговора отвечает на onclick событие и отображение сообщений, но когда эта функция используется внутри первого ответа успеха Ajax (getParticipants()), его получение данных правильно и я вижу в расширении DevTools VueJs, что сообщения установлены, но вид не показывает сообщения, я пробовал vm.$set() но никаких шансов.

обновление:

второй Ajax работает без ошибок, и свойство данных сообщений заполняется (я проверил Vue DevTools), единственная проблема в том, что представление не показывает сообщения!! но когда я делаю это вручную нажав на разговор, второй ajax выполняется снова, и я вижу сообщения!, Я также пробовал vm.$forceUpdate() после второго ajax без шансов.

Update2 html часть(ошибка здесь!!)

<a vbind:id="conv.id" v-on:click="getMessages(conv.id)" onclick="$('#user-messages').addClass('active')">

7
ajax javascript vue-resource vue.js vuejs2

4 ответов

DOM обновляется сообщениями, когда вы выполняете запрос ajax только с getConversationMessages и не поставив getConversationMessages в успешном обратном вызове ajax-запроса getParticipants тот факт, что ошибка возникает в этой строке

this.participants = response.data.participants;

вы используете нормальную функцию в успешном обратном вызове запроса ajax, что является причиной this не указывает на экземпляр vue adnd this.participants дает вам неизвестная ошибка. Так что используйте vm insteaad, чтобы указать на экземпляр vue как вы сделали в остальной части программы

vm.participants = response.data.participants;

редактировать

var vm = new Vue({
         el: '#messages',
        data: {
            participants: [],
            active_conversation: '',
            messages: []
        },

        methods: {

            getParticipants: function () {
                 return this.$http.post('message/get-participants');
            },

           getConversationMessages : function(conv_id){
               return this.$http.post('message/get-messages/' + conv_id);
           }
        },


      mounted: function () {
            this.getParticipants().then(function (response){

                vm.participants = response.data.participants;

                if (getUrlParameterByName('conversation_id')) {
                    return vm.getConversationMessages (getUrlParameterByName('conversation_id')); // this ajax call is getting data but not showing in view  
                }
            }).then(function(response){
                if (response.data.status == 'success') {
                console.log(response.data.messages)
                   vm.messages = response.data.messages;
            });

        }

})
3

вызов второго http-запроса после завершения первого с помощью обратного вызова http или вы можете использовать Promise тоже.

return this.$http.post(function(response){

   // first call
}).then(function(response){

// Second call
})
2

new Vue({
  el: '#messages',
  data: {
    participants: [],
    active_conversation: '',
    messages: []
  },
  methods: {
    async getParticipants (id) {
      var response = await this.$http.post('message/get-participants')
      this.participants = response.data.participants
      if (id) this.getConversationMessages(id)
    },
    async getConversationMessages (id) {
      var response = this.$http.post('message/get-messages/' + id)
      if (response.data.status === 'success') {
        console.log(response.data.messages)
        this.messages = response.data.messages;
      }
    }
  },
  created () {
    this.getParticipants(getUrlParameterByName('conversation_id'))
  }
})
2

мне очень жаль! Проблема была в html, мой товарищ по команде, который не знает vuejs добавил onclick событие для активации области сообщений (показать сообщения div) рядом с my v-on:click, поэтому область сообщений активна только тогда, когда пользователь нажимает на разговор, а не при попытке получить их внутри первого ajax!

я обновил свой вопрос, чтобы показать часть html, которая вызывает проблему.

спасибо всем

0