獲取響應後更新自定義組件的表單

Question

我試圖在Laravel Spark的自定義組件中加載Tutor的配置文件。它隨我所輸入的內容更新而沒有問題，但加載時總是空的。

組件本身如下：

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 
       }); 
      }); 
    }, 
} 

}）;

這裏是聯模板，我有：

<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> 

很新的Vue和努力學習去！任何幫助深表感謝！

Answer 1

OK，首先是bus應該用於組件之間，而不是組件本身內部的溝通，所以updateTutor應該是一個方法：

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

現在對於一些其他的東西看出來：

請確保您按照您希望執行的順序呼叫您的代碼，因爲您看起來是總線上的emitting，然後設置爲this.tutor，但是您的功能使用this.tutor的值更新this.updateTutorProfileForm.profile，所以this.tutor = response.data;應該在嘗試使用結果之前來。

你有一個範圍的問題在你$on，所以this並不是指Vue instance數據，但本身的功能：

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

使用箭頭函數：

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

確保你是而不是發展與Vue的縮小版本從​​否則你不會得到在警告。

我看不出你如何定義你的車，但它應該只是一個空的Vue例如在全球範圍內：

var Bus = new Vue(); 

最後，你mounted()掛鉤重複created()鉤碼，所以它不是必需的。我的猜測是，你只是想嘗試一些事情來獲得更新，但通常你可以在created()鉤子中做任何初始化數據，當你需要訪問this.$el時，你使用mounted鉤子。見https://vuejs.org/v2/api/#Options-Lifecycle-Hooks