vue.js - 验证子组件Vue vee-validate
问题描述
应用程序(父级)
嗨,我有这些组件(子)TextComponent InfoErrorForm
当我从父组件按提交时,应用程序不会验证此表单。所以我尝试在子组件(TextComponent)中使用注入 $validator 进行验证,并提供但不显示消息错误。如果您可以帮助我验证子窗体 inisde 父组件。这是我的代码
应用组件
<template>
<div>
<!-- Form validar numero max input -->
<form :class="{'was-validated': error_in_form_save_progress}" >
<card-shadow v-for="(texto,key) in sections_template.texts" :key="key" >
<texto-component
:orden="key+2"
v-model="sections_template.texts[key].content"
:tituloComponente="texto.title"
:inputName="texto.title" >
<template slot="section_show_error_validate_input">
<info-error-form
:listErrors='errors'
:name_field = "texto.title"
v-show = "error_in_form_save_progress" >
</info-error-form>
</template>
</texto-component>
</card-shadow>
</form>
<div class="row foot_button" >
<div class="offset-md-3 col-md-3">
<button class="btn" @click.prevent="save_progrees"> Guardar Cambios</button>
</div>
</div>
</div>
</template>
<script>
export default {
provide() {
return {
$validator: this.$validator,
};
},
data: function(){
return {
sections_template: {
texts:[
{
section_template_id: 1,
type: "texto",
title: "fundamentacion",
content: ""
},
{
section_template_id: 2,
type: "texto",
title: "sumilla",
content: ""
}
] },
error_in_form_save_progress: true
}
},
methods:{
save_progrees(){
this.$validator.validateAll().then((result) => {
if (result) {
this.error_in_form_save_progress = false;
alert("se guardaran cambios");
return
}
this.error_in_form_save_progress = true;
});
}
}
}
</script>
解决方案
我找到了这个代码的解决方案。在我的父组件中,我添加提供并发送$validator
export default {
components:{
...
},
provide() {
return {
$validator: this.$validator,
}
},
在我的子组件中,我收到了这个
inject: ['$validator'],
在我的父组件中,我将此方法添加到调用验证
methods:{
save_progrees(){
var validationArray = this.$children.map(function(child){
return child.$validator.validateAll();
});
window.Promise.all(validationArray).then((v) => {
v.some( element => { if ( element == false ) { throw "exists error in child component";} });
this.error_in_form_save_progress = false;
alert("datos guardados");
return
}).catch(() => {
this.show_message_error_validation();
});
},
show_message_error_validation(){
this.error_in_form_save_progress = true;
}
}
最后为了在组件信息错误中显示错误,我使用了这段代码
<template>
<div class="row" v-if="errors.items">
<div class="col-md-12">
<template v-for="(e,key) in errors.items" >
<div class="text-danger" v-if="e.field ==name_field" :key="key"> {{e.msg}} </div>
</template>
</div>
</div>
</template>
推荐阅读
- r - 如何在 R 中减去 .csv 文件中的 2 列?
- git - 如何查看 vscode 源代码控制的工作变化
- python - 在 Django Admin 中访问内联 get_formset 中的内联字段
- javascript - 如何实现文件上传的恢复暂停功能?我正在使用节点 js、gridfs 和 multer
- javascript - 有没有办法将按钮链接到链接并将其文本居中?
- python - 基于条件的求和列 - 熊猫
- flutter - 图像未保存在 android 库中。而它在模拟器上正常工作
- paypal - Google Pay API:Braintree 网关配置
- firebase - Firebase Remote-Config 无崩溃用户
- windows - 如何创建桌面宠物