vue js ajax inside another ajax 正在获取数据但不呈现视图

Question

有一种情况，我必须在 vuejs 中的第一个 ajax（在 mounted 函数中）之后获取额外的数据，我将第二个 ajax 放在 if 条件和第一个 ajax!

的内部 success 函数

它正在工作，我在 chrome 中看到 Vue Devtools 中的数据，但数据未在视图中呈现。

伪代码：

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 再次执行，我可以看到消息！，我也在第二个 ajax 之后尝试 vm.$forceUpdate() 没有机会。

Update2 html部分（错误在这里！！）

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

Answer 1

当您仅使用 getConversationMessages 而不放置 ajax 请求时，DOM 会更新消息 getParticipants的ajax请求的成功回调中的getConversationMessages就是在这一行遇到错误

this.participants = response.data.participants;

您在 ajax 请求的成功回调中使用了普通函数，这就是 this 未指向 vue 实例的原因 adnd this.participants 给你一个未定义的错误。所以使用 vm 而不是指向 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;
            });

        }

})

Answer 2

在使用 http 回调完成第一个 http 请求后调用第二个 http 请求，或者您也可以使用 Promise。

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

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

// Second call
})

Answer 3

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'))
  }
})

Answer 4

我的问题出在 html，我之前向 div 元素添加了自定义 onclick 事件，但此事件与 Vuejs 事件冲突。

vue js ajax inside another ajax 正在获取数据但不呈现视图

vue js ajax inside another ajax is getting data but not rendering view

javascript

ajax

vue.js

vue-resource

vuejs2