Блог

Я изучаю Vue 3 (API композиции) и застрял на пошаговой проверке формы с родительско-дочерними компонентами. Я понятия не имею, как я могу легко проверить ввод на дочернем компоненте, выдать ошибку родительскому компоненту и избежать перехода пользователя к следующему шагу с отображением ошибок

Родитель

 <form @submit.prevent="submitForm" class="tab-content py-6 ">
  <template v-if="currentStep == 0">
    <Step1 v-model:TYPE="TYPE" />

    <div class="nav row align-items-center">
      <div class="col-auto">
        <button v-show="currentStep > 0" @click="Previous" class="btn btn-lg btn-white" >Previous</button>
      </div>
      <div class="col text-center">
      </div>
      <div class="col-auto">
        <a @click="Next" class="btn btn-lg btn-primary" >Next</a>
      </div>
    </div>

  </template>
  <template v-if="currentStep == 1">
    <Step2 
      v-model:first_name="first_name" 
      v-model:last_name="last_name" />

    <div class="nav row align-items-center">
      <div class="col-auto">
        <button v-show="currentStep > 0" @click="Previous" class="btn btn-lg btn-white" >Previous</button>
      </div>
      <div class="col text-center">
      </div>
      <div class="col-auto">
        <a @click="handleSubmit" class="btn btn-lg btn-primary" >Submit</a>
      </div>
    </div>
    
  </template>
</form>
 

Ребенок: Шаг 1.vue

     <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="Student" value="Student" 
        v-model="TYPE"
        @input="$emit('update:TYPE', $event.target.value)"
        >
        <label class="form-check-label" for="prospect">
        Student
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="Teacher" value="Teacher" 
        v-model="TYPE"
        @input="$emit('update:TYPE', $event.target.value)"
        >
        <label class="form-check-label" for="Teacher">
        Teacher
        </label>
    </div>

// Add validation here => If no selection is made, do not go to step 2
 

Ребенок: Шаг 2.vue

     <div class="form-group">
        <label class="form-label">
        first Name
        </label>
        <input v-model="first_name" type="text" class="form-control" 
        @input="$emit('update:first_name', $event.target.value)"
        >
    </div>
    <div class="form-group">
        <label class="form-label">
        last Name
        </label>
        <input v-model="last_name" type="text" class="form-control" 
        @input="$emit('update:last_name', $event.target.value)"
        >
    </div>

// Add validation here => If first Name or last Name is empty, do not send the form