0

如果未填写必填字段，则我的所有页面都有单独的组件进行逐个导航，如果未填写必填字段，我应该将所有错误消息作为弹出窗口显示。

我们已经使用 vee-validate 库来显示所有错误它工作正常，当我们真正专注于输入而不是填充它时，我们能够看到错误消息，但是当我们没有专注并直接点击继续时，我没有看到任何错误

    <template>
    <section>
      <ValidationObserver ref="form" v-slot="{ invalid }">
                <form class="text-left">
                  <div>
                    <select
                      class="form-control w-25"
                      v-model="name1"
                      v-on:change="saveData($event)"
                    >
                      <option value="0">Please select</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
                  </div>
                  <ValidationProvider rules="required" v-slot="{ errors }">
                  <div>
                    <input
                      type="text"
                      v-model="firstName"
                      v-on:change="saveData($event)"
                      id="fname"
                    />
                    <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span>
                  </div>
                  </ValidationProvider>
                  <ValidationProvider rules="required" v-slot="{ errors }">                  
                  <div class="pb-2 pt-2">
                    <input
                      type="text"
                      v-model="lastName"
                      v-on:change="saveData($event)"                      
                      id="lname"
                      placeholder
                    />
                    <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span>
                  </div>
                  </ValidationProvider>
                </form>
                </ValidationObserver>
              <footer></footer>
           </section>       
</template>

    <script>
      import {ValidationProvider, ValidationObserver} from 'vee-validate';
      import footer from '@component/footer'; 

    components :{
        ValidationProvider,
        ValidationObserver,
        footer
    }
      methods:{
          saveData(event){
              console.log(event)
          }
      }
  </script>

** 页脚组件 ** 我也将validationObserver 与refs 一起使用，但无法触发.validate()

<template>
    <section>
    <b-row>
    <b-col>
        <nuxt-link v-if="continueToNextPage() != 'null'" class="applyContinue" :to="continueToNextPage()">Continue</nuxt-link>
      </b-col>
    </b-row> 
    </section>   
</template>

<script>
export default {
methods: {
    continueToNextPage(){
        this.$refs.validate()
    }
}
}
</script>

你能帮我们解决这个问题吗！

4

1 回答 1

0

该footer组件无权访问其父级的 ref，因此您无法从那里进行验证，而是让它发出一个continue事件并让父级监听它并相应地触发验证。

页脚.vue

<template>
    <section>
    <b-row>
    <b-col>
        <nuxt-link v-if="continueToNextPage() != 'null'" class="applyContinue" :to="continueToNextPage()">Continue</nuxt-link>
      </b-col>
    </b-row> 
    </section>   
</template>

<script>
export default {
  methods: {
    continueToNextPage(){
      this.$emit('continue');
    }
  }
}
</script>

和父组件：

<ValidationObserver ref="form" v-slot="{ invalid }">
  <!-- .... -->
</ValidationObserver>

<footer @continue="$refs.form.validate()"></footer>
于 2020-08-01T23:38:38.730 回答