另一个ajax中的vue js ajax正在获取数据但不呈现视图

Posted 2023-02-22

【中文标题】另一个ajax中的vue js ajax正在获取数据但不呈现视图

【英文标题】：vue js ajax inside another ajax is getting data but not rendering view

【发布时间】：2018-05-05 08:26:55

【问题描述】：

有一种情况，我必须在 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')">

【问题讨论】：

您从未定义过vm？你应该得到一个 JS 错误。

@BrianGlaz 在第一行定义！你什么意思？

顺便说一句，这是一个伪代码，我的代码正在运行，我有渲染问题，我也试过vm.$set()函数

试试created 而不是mounted？我相信当mounted 被调用时DOM 已经被渲染了。您也可以尝试将this.getParticipants 包装在Vue.nextTick 函数中。

@BrianGlaz 试过created同样的结果，我对Vue.nextTick一无所知让我搜索！

【参考方案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;
            );

        

)

【讨论】：

试过vm.participants同样的结果，正如我提到的，没有错误，第二个ajax正在工作，我可以在控制台和Vue Devtools中看到ajax结果messages，即：$vm.messages充满了消息，唯一的问题是视图没有呈现，我在页面中看不到消息

@AhmadMobaraki 你能按照我更新的答案重构代码吗

谢谢，我会努力的。 （我会在 2 或 3 小时内通知你！！）但我需要我的函数是 success 内部函数。因为他们应该独立响应onclick事件

我按照你的建议重构了我的代码，但结果相同:(

@AhmadMobaraki 请使用更正的代码更新您的问题。

【参考方案2】：

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

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

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

// Second call
)

【讨论】：

非常感谢，问题出在html上！我又更新了问题

【参考方案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'))
  
)

【讨论】：

非常感谢，问题出在html上！我又更新了问题

【参考方案4】：

对我来说问题出在 html 中，我之前在 div 元素中添加了一个自定义的 onclick 事件，这个事件与 Vuejs 事件冲突。