获取响应后更新自定义组件的表单

我试图在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和努力学习去！任何帮助深表感谢！

来源

2017-02-01 davidsneal

你能解释一下吗？很难理解你的问题 –

@MU请看我对下面答案的评论，它看起来不像'$ emit'调用'$ on'方法 – davidsneal

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

来源

2017-02-01 10:44:43

你是一个传奇，谢谢@craig_h ！欢呼所有的解释，这有助于我更好地了解发生了什么，并得到它的工作：D **编辑**抱歉，但我不能upvote评论，因为我没有rep点 – davidsneal

获取响应后更新自定义组件的表单

回答

相关问题