必填字段为空时如何在Quasar Stepper中显示错误

如何解决必填字段为空时如何在Quasar Stepper中显示错误

我与Quasar框架一起工作。我创建一个步进器，并且在每个步骤中都有几个字段。有些是必需的 像这样：

 <q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>\
            <q-step dense :name="1" title="Infos générales" icon="settings" :done="step > 1"  :error="step < 3">
                <q-card-section class="q-pt-none">
                    <div class="q-col-gutter-x-md">
                        <q-input class="full-width" dense v-model="infos.motif" label="Raison *" hint="Détaillez la raison. * Champs requis" :rules="Required"></q-input>
                    </div>
                </q-card-section >
               
            </q-step>
           
            <q-step dense :name="2" title="Mise en copie" icon="assignment" :done="step > 2" >
                <q-card-section class="q-pt-none" >
                    <div  class="row items-start content-start" >
                        <div class="text-subtitle2">A la demande</div>
                        <selectusers v-bind:users="users" v-bind:model.sync="infos.copiedemande"></selectusers>
                     </div >\
                </q-card-section >
            </q-step>
            <template v-slot:navigation>
                <q-stepper-navigation >
                    <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Retour"  />
                    <q-btn @click="$refs.stepper.next()" color="primary" :label="step === 2 ? \'Fini\' : \'Continuer\'" class="float-right"/>
                </q-stepper-navigation >\
            </template >\
        </q-stepper>

Required是一个计算式：Required（）{return [（v）=> !! v || 'Saisissez quelque选择了:-)']}， 如果我未填写infos.motif字段，我想在更改步骤时出现第一步显示错误

我找不到链接：错误从步骤到字段的规则 感谢您的指导

UPDATE1 我在第一页中添加了带有引用的表单。

<q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>
            <q-step dense :name="1" ref="step1" title="Infos générales" icon="settings" :done="step > 1"  :error="checkform1()">
                 <q-form ref="myForm1">

其中checkform1是一种方法

 checkform1() { return this.$refs.stepper ? this.$refs.stepper.$refs.step1.$refs.myForm1.validate() : true; }

但是我无法访问我的表格。当我有this。$ refs.stepper时，$ ref为空... UPDATE2 我在代码笔here

上创建了一个示例

解决方法

我迈出了一大步...这个想法是传递数据并在转换前调用我的checkform函数

<div id="q-app">

<q-stepper
  v-model="step"
  header-nav
  ref="stepper"
  color="primary"
  animated
  @before-transition="checkform1"
>
  <q-step
    :name="1"
    title="Select campaign settings"
    icon="settings"
    :done="done1"
    :error="stateform1"
  > <q-form ref="myForm" class="q-gutter-md" >
    <q-input
       v-model="firstName"
       :rules="[val => !!val || 'First name is required']"        
      />
</q-form>
    <q-stepper-navigation>
      <q-btn @click="() => { done1 = true; step = 2 }" color="primary" label="Continue"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="2"
    title="Create an ad group"
    caption="Optional"
    icon="create_new_folder"
    :done="done2"
  >
    An ad group contains one or more ads which target a shared set of keywords.

    <q-stepper-navigation>
      <q-btn @click="() => { done2 = true; step = 3 }" color="primary" label="Continue"></q-btn>
      <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="3"
    title="Create an ad"
    icon="add_comment"
    :done="done3"
  >
    text3

    <q-stepper-navigation>
      <q-btn color="primary" @click="done3 = true" label="Finish"></q-btn>
      <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>
</q-stepper>
 </div>
</div>

和js

new Vue({
el: '#q-app',data () {
return {
  step: 1,done1: false,done2: false,done3: false,firstName: '',stateform1:false
}
},methods: {
reset () {
  this.done1 = false
  this.done2 = false
  this.done3 = false
  this.step = 1
  this.stateform1=false
  this.firstName= ''
},checkform1() {
 if (this.$refs.myForm) {
    this.$refs.myForm.validate().then(success => {
      if (success) {
        this.stateform1= false;
      }
      else {
       this.stateform1= true;
      }
    });
  }
} //this.step<3; 
}
})

像here

但是还有另一个问题。当我在特定步骤上时，其他形式不存在...并且如果我通过了step1 tp步骤3 ...我无法检查step2 就像你可以看到enter link description here

最后我找到了另一种方法。我保留了：error =“ stateform1”的内容，但我还在服务器端进行了检查，如果缺少字段，我将返回步骤名称，并在返回错误时更改变量