При нажатии на кнопку nuxt-link с помощью vee-validate должны появляться всплывающие окна проверки многоэтапной формы Nuxtjs.

У меня есть отдельные компоненты для всех моих страниц, которые будут перемещаться одна за другой, если обязательные поля заполнены, если нет, я должен получать все сообщения об ошибках в виде всплывающего окна, если обязательные поля не заполнены.

Мы использовали библиотеку 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 со ссылками, но не смог запустить .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>

Не могли бы вы помочь нам в решении этой проблемы!


javascript html vue.js nuxtjs vee-validate
person Ramya Uma    schedule 29.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Компонент footer не имеет доступа к своему родительскому ref, поэтому вы не можете выполнить проверку оттуда, вместо этого позвольте ему генерировать событие continue и заставить родительский элемент прослушивать его и соответственно запускать проверку.

footer.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>
person logaretm    schedule 01.08.2020