Bedingte V-Bindung: Einchecken vuejs

Question

Ich möchte meine Checkbox nach Vorhandensein bestimmter Daten in der Datenbank überprüft haben. Ich benutze Vuejs in Laravel. Im Anschluss ist mein Code für Checkbox:

<input type="checkbox" value="{{$complaint->complaintID}}" :checked="CheckCECDecisionSigned({{$complaint->complaintID}})" disabled> 

Und unten ist mein vuejs Methode:

methods: { 
     CheckCECDecisionSigned: function (complaintID) { 
      if (complaintID) { 
       var self = this; 
       this.$http.get('/cimsm/public/api/fetchCECDecisionSignature/' + complaintID).then(function (response) { 
        if (response.data.length > 0) { 
         return true; 
        } 
       }); 
      } 
     }, 

Wie Sie sehen können, wenn response.data.length > 0 dann würde Ich mag true zurück und haben daher das Kontrollkästchen aktiviert. Aber ich kann nicht scheinen, die Methode zu bekommen, Boolean zurückzugeben, auch wenn response.data.length größer ist als 0 Kannst du mir helfen?

Answer 1

Ich denke nicht, dass dies funktioniert, da der Anruf asynchron ist. Sie sollten versuchen, den Zustand der Kontrollkästchen auf eine Variable, und v-model das Kontrollkästchen, um es zu binden, wie:

<input type="checkbox" 
value="{{$complaint->complaintID}}" 
:v-model="isChecked" 
disabled> 

Und dann, in den Rückruf der AJAX-Funktion:

if (response.data.length > 0) { 
    self.isChecked = true 
} 

Sie werden müssen einige Probleme lösen, wie zB einen anderen Weg finden, die complaintID an die AJAX-Funktion zu übergeben (vielleicht mit Komponenten und Requisiten?). Überprüfen Sie dies: https://vuejs.org/guide/forms.html#Checkbox