다른 Ajax 내의 vue js가 데이터를 가져오지만 보기를 렌더링하지 않습니다.

다른 Ajax 내의 vue js가 데이터를 가져오지만 보기를 렌더링하지 않습니다.

첫 번째 에이잭스 이후 추가 데이터를 얻어야 할 상황이 있습니다.mounted기능) vuejs에서 두 번째 아약스를 넣었습니다.if조건과 내부success첫 번째 아약스의 함수!

동작하고 있으며 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이 함수가 First Ajax 성공 응답 내에서 사용되는 경우.getParticipants()데이터를 올바르게 가져오고 DevTools VueJs Extension에서 메시지가 설정되었지만 보기에 메시지가 표시되지 않는 것을 확인할 수 있습니다. 시도했습니다.vm.$set()기회가 없어요.

업데이트:

두 번째 Ajax는 오류 및 메시지 데이터 속성이 채워지지 않고 작동합니다(Vue DevTools를 선택). 유일한 문제는 보기에 메시지가 표시되지 않는다는 것입니다!!하지만 대화를 클릭해서 수동으로 하면 두 번째 에이잭스가 다시 실행되어 메시지를 볼 수 있습니다.vm.$forceUpdate()두 번째 에이잭스에 이어 가망이 없어요

업데이트 2 html part (버그는 이쪽!!)

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

DOM은 Ajax 요청을 실행한 경우에만 메시지와 함께 업데이트됩니다.getConversationMessages배치하지 않음getConversationMessagesAjax 요구의 성공 콜백으로getParticipants이 회선에서 에러가 발생하고 있는 것.

this.participants = response.data.participants;

Ajax 요청의 성공 콜백에 일반 함수를 사용하고 있습니다.그것이 원인입니다.thisvue 인스턴스를 가리키지 않음this.participants정의되지 않은 오류가 나타납니다.사용방법vminsteaad를 사용하여 프로그램의 다른 부분과 마찬가지로 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;
            });

        }

})

첫 번째 http 콜백이 완료된 후 두 번째 http 요청을 호출하거나 Promise를 사용할 수도 있습니다.

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

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

// Second call
})

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로 되어 있어서 커스텀을 추가했습니다.onclick이벤트와 Vuejs 이벤트가 충돌하고 있습니다.

언급URL : https://stackoverflow.com/questions/47420472/vue-js-ajax-inside-another-ajax-is-getting-data-but-not-rendering-view