如何在vuejs2中将道具从孩子重置为父母

时间:2018-07-22 21:13:37

标签: javascript vuejs2

我制作了一个表单模板(form.vue),其中包含保存功能以避免重复它和HTML的某些部分,我也想将其发送到此处并重新启动父表单的道具({ {1}})

此模板是子模板:

authors_form.vue

发送的prop是一个对象,因为我认为它使模板更可重用,起初我使用$发出,但这意味着我必须在每种形式中定义reset方法({{ 1}}, <template> <v-flex xs12 sm12 lg6> <v-card> <v-toolbar color="pink"> <v-card-title primary-title>{{ source.title }}</v-card-title> </v-toolbar> <v-form v-model="valid" > <slot name='content-form'></slot> </v-form> <v-card-actions> <v-spacer></v-spacer> <v-btn color="green darken-1" flat="flat" @click="save()" :disabled="!valid">Save</v-btn> <v-btn color="green darken-1" flat="flat" @click="$router.push(source.return)">Cancel</v-btn> </v-card-actions> </v-card> <v-dialog v-model="dialog" max-width="290"> <v-card> <v-card-title class="headline">{{ msm }}</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="green darken-1" flat="flat" @click="$router.push(source.return)">return to list</v-btn> <v-btn color="green darken-1" flat="flat" @click.native="resetForm">continue here</v-btn> </v-card-actions> </v-card> </v-dialog> </v-flex> </template> <script> export default { props:{ source:Object, form:Object }, data: () => ({ valid: true, dialog:false, msm:'', error:false }), methods:{ save(){ let vm=this axios[this.source.method](this.source.create,this.form) .then(function(response) { Vue.set(vm.$data,'msm',response.data) }) .catch(function(error) { Vue.set(vm.$data, 'msm', error.response) Vue.set(vm.$data,'error',true) }) this.dialog=true }, resetForm(){ /* reset props */ this.dialog=false } } } </script> authors_form.vue等)。

此模板是以下形式之一(父级):

books_form.vue

0 个答案:

没有答案