应用程序(家长)

嗨,我有这些组件( children )

当我从父组件中按submit时,应用程序不会验证此表单.所以我try 在子组件(TextComponent)中使用inject$validator进行验证,并提供但不显示错误消息.

应用组件

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

推荐答案

我用这个代码找到了解决方案.在我的父组件中,我添加了provide,并发送了$validator

export default {
    components:{
      ...
    },
    provide() {
      return {
        $validator: this.$validator,
      }
    },

在我的子元素部分,我收到了这个

inject: ['$validator'],

在父组件中,我将此方法添加到invoque验证中

 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>

Vue.js相关问答推荐

V-img不显示文件夹中的图像

Vuetify右侧并排switch

Vue Js Composition Api 未定义(读取名称)

如何在Vue js 3中根据API响应替换react 值

更改 Vuetify 轮播高度

有没有办法初始化一个保留初始 HTML 的 Vue 对象

Vue:如何将 store 与组件一起使用?

如何从 .vue 文件中导出多个对象

Vue.js 如果在视图中

Vue-test-utils:在单个测试中多次使用 $nextTick

Vuetify - 如何在 v-data-table 中单击时突出显示行

使用 Vue.js 的用户可切换自定义主题

Vue Prop 没有初始化器,也没有在构造函数中明确赋值

如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID?

将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误 'options has an unknown property 'indentedSyntax''

如何在生产模式下为 chrome 扩展启用 Vue devtools?

vue 3 使用 Vuex 和路由的服务器端渲染

使计算的 Vue 属性依赖于当前时间?

如何从浏览器的源中删除 webpack://

如何访问通用 javascript 模块中的当前路由元字段