我制作了一个表单模板(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