另一個ajax中的vue js ajax正在獲取數據但未呈現視圖

Question

有一種情況，我必須在 vuejs 中的第一個 ajax（在mounted函數中）之后獲取額外的數據，我已經將第二個 ajax 放在第一個 ajax 的if條件和內部success函數中！

它正在工作，我在 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 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 請求而不將getConversationMessages放在getParticipants的 ajax 請求的成功回調中時，DOM 會更新消息，這是在這一行遇到錯誤的事實

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 事件發生沖突。