另一个ajax中的vue js 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 Extension 中设置了消息但视图不显示消息，我尝试过 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 请求而不放置 getParticipants的ajax请求成功回调中的getConversationMessages就是在这一行遇到了错误

this.participants = response.data.participants;

您在 ajax 请求的成功回调中使用了普通函数，这就是 this 不指向 vue 实例的原因 添加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;
            });

        }

})

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 事件冲突。