Vue JS AJAX Anruf innerhalb Modal

Question

Ich versuche, ein modales Pop-up mit Details einer Kreditkarte zu haben. Die Details stammen aus einer AJAX-Anfrage. Aus irgendeinem Grund wird die Root-Vue-Instanz aktualisiert, die Komponenteninstanz jedoch nicht. Dies ist, was ich zur Zeit haben -

HTML:

<!-- View Card Details Modal --> 
<!-- Modal --> 
<div class="modal fade" id="ccdetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">View Card Details</h4> 
     </div> 
     <card-details cardid="{{$cc->card_id}}" :message="getCCDetails('{{$cc->card_id}}')"></card-details> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <!-- <button type="button" class="btn btn-primary">Save changes</button> --> 
     </div> 
    </div> 
    </div> 
</div> 

Vue JS:

<script type="text/javascript"> 
Vue.component('card-details', { 
    template: '<div class="modal-body">@{{message}}</div>', 
    // data is technically a function, so Vue won't 
    // complain, but we return the same object 
    // reference for each component instance 
props: ['message', 'cardid'] 
}), 
new Vue({ 
    el: '#ccdetails', 
    data: { 
    cardid: '', 
    message: '' 
    }, 
    methods: { 
     getCCDetails: function (id) { 
      console.log(id) 
      console.log('calling function') 
      axios.get('/card/'.concat(id)) 
        .then(function (response) { 
        this.message = JSON.stringify(response.data) 
        }.bind(this)) 
        .catch(function (error) { 
        return this.message = 'Sorry there was an error' 
        }.bind(this)); 
     } 
    } 
}) 
</script> 

Für die Ausgabe, Wurzel-Instanz hat cardid = undefined und message = the output ich will. Meine cardDetails-Instanz hat den Wert cardid korrekt, aber message = undefined.

Answer 1

hilft können Sie Ereignisse versuchen

Ereignis-Listener in der Komponente hinzufügen:

Vue.component('card-details', { 
     template: '<div class="modal-body">@{{message}}</div>', 
     // data is technically a function, so Vue won't 
     // complain, but we return the same object 
     // reference for each component instance 
     props: ['cardid'], 

     data: { 
      message: '' 
     }, 

     mounted() { 
      this.$parent.$on("card-details:message", message => { 
       this.message = message; 
      }); 
     }, 
    }), 

Add emittieren Linie in Funktion:

getCCDetails: function (id) { 
     console.log(id) 
     console.log('calling function') 
     axios.get('/card/'.concat(id)) 
      .then(function (response) { 
       this.message = JSON.stringify(response.data) 
       this.$emit('card-details:message', this.message) // <-- 
      }.bind(this)) 
      .catch(function (error) { 
       return this.message = 'Sorry there was an error' 
      }.bind(this)); 

    } 

Und getCCDetails Funktionsaufruf nur klicken auf View DetailsTaste.

Answer 2

ich am Telefon bin traurig, versuchen Sie dies:

• Set :message="message" in Ihrer Karte Details

• dann im Wurzel Vue Element, ein :cardid="{{$cc->card_id}}" hinzufügen, und vergessen Sie nicht cardid prop

• dann implementieren mounted Methode in der Root-Instanz und rufen Sie getCCDetails(this.cardid) von dort.

• innen getCCDetails gesetzt message Eigenschaft

Ich hoffe, das

Answer 3

Modal ist nicht für Ajax-Aufrufe. Sie müssen Ajax-Aufrufe von Controllern haben.