Aktualisieren der benutzerdefinierten Komponente Formular nach Erhalt einer Antwort

Question

Ich versuche, in einem Tutor-Profil in einer benutzerdefinierten Komponente mit Laravel Spark zu laden. Es aktualisiert mit was auch immer ich kein Problem, aber das ist immer leer, wenn geladen.

Das Bauteil selbst ist wie folgt:

Vue.component('tutor-settings', { 

data() { 
    return { 
     tutor: [], 

     updateTutorProfileForm: new SparkForm({ 
      profile: '' 
     }) 
    }; 
}, 

created() { 
    this.getTutor(); 

    Bus.$on('updateTutor', function() { 
     this.updateTutorProfileForm.profile = this.tutor.profile; 
    }); 
}, 

mounted() { 
    this.updateTutorProfileForm.profile = this.tutor.profile; 
}, 

methods: { 
    getTutor() { 
     this.$http.get('/tutor/current') 
      .then(response => { 
       Bus.$emit('updateTutor'); 
       this.tutor = response.data; 
      }); 
    }, 

    updateTutorProfile() { 
     Spark.put('/tutor/update/profile', this.updateTutorProfileForm) 
      .then(() => { 
       // show sweet alert 
       swal({ 
        type: 'success', 
        title: 'Success!', 
        text: 'Your tutor profile has been updated!', 
        timer: 2500, 
        showConfirmButton: false 
       }); 
      }); 
    }, 
} 

});

Hier ist die Inline-Vorlage habe ich:

<tutor-settings inline-template> 
<div class="panel panel-default"> 
    <div class="panel-heading">Tutor Profile</div> 

    <form class="form-horizontal" role="form"> 
     <div class="panel-body"> 
      <div class="form-group" :class="{'has-error': updateTutorProfileForm.errors.has('profile')}"> 
       <div class="col-md-12"> 
        <textarea class="form-control" rows="7" v-model="updateTutorProfileForm.profile" style="font-family: monospace;"></textarea> 

        <span class="help-block" v-show="updateTutorProfileForm.errors.has('profile')"> 
         @{{ updateTutorProfileForm.errors.get('profile') }} 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class="panel-footer"> 
      <!-- Update Button --> 
      <button type="submit" class="btn btn-primary" 
        @click.prevent="updateTutorProfile" 
        :disabled="updateTutorProfileForm.busy"> 
       Update 
      </button> 
     </div> 
    </form> 
</div> 

Sehr neu zu Vue und unterwegs zu lernen versuchen! Jede Hilfe wird sehr geschätzt!

Answer 1

OK, zunächst ein bus sollte für die Kommunikation zwischen den Komponenten verwendet werden, nicht innerhalb der Komponenten selbst, so sollte updateTutor ein Verfahren sein:

methods: { 
    getTutor() { 
     this.$http.get('/tutor/current') 
      .then(response => { 
       this.tutor = response.data; 
       this.updateTutor(); 
      }); 
    }, 
    updateTutor() { 
     this.updateTutorProfileForm.profile = this.tutor.profile; 
    } 
} 

Jetzt für ein paar andere Dinge zu achten:

Stellen Sie sicher, dass Sie den Code in der Reihenfolge aufrufen, in der er ausgeführt werden soll, da emitting auf dem Bus angezeigt wird und this.tutorthis.tutor für die Aktualisierung von this.updateTutorProfileForm.profilethis.tutor = response.data; sollte vor dem Versuch kommen, das Ergebnis zu verwenden.

Sie haben einen Umfang Problem in Ihrem $on, so dass die this nicht Vue instance Daten bezieht, sondern die Funktion selbst:

Bus.$on('updateTutor', function() { 
    // Here 'this' refers to the function itself not the Vue instance; 
    this.updateTutorProfileForm.profile = this.tutor.profile; 
}); 

Verwenden Sie einen Pfeil Funktion statt:

Bus.$on('updateTutor',() => { 
    // Here 'this' refers to Vue instance; 
    this.updateTutorProfileForm.profile = this.tutor.profile; 
}); 

Stellen Sie sicher, sind nicht Entwickeln mit der verkleinerten Version von Vue von der CDN sonst werden Sie keine Warnungen in derbekommen.

Ich kann nicht sehen, wie Sie Ihren Bus definieren, aber es sollte nur eine leere Vue Instanz im globalen Bereich sein:

var Bus = new Vue(); 

Und schließlich Ihre mounted() Haken Wiederholung des created() Code Haken, also ist es nicht nötig. Meine Vermutung ist, dass Sie nur ein paar Dinge ausprobiert haben, um das Update in Brand zu setzen, aber Sie können in der Regel alle Daten initialisieren im created() -Hook und Sie verwenden den mounted -Hook, wenn Sie Zugriff auf die this.$el benötigen. Siehe https://vuejs.org/v2/api/#Options-Lifecycle-Hooks