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

Question

我使用 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 字段，我希望在更改步骤时第一步显示错误

我没有找到如何链接 :error from step 到 rules from field 感谢您的指导

更新1 我在第一页添加了一个带有 ref 的表单。

<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 我在 codepen here 上创建了一个示例

Answer 1

我迈出了一大步......这个想法是通过数据并在转换前调用我的 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

但留下另一个问题。当我在特定步骤时，其他形式不存在...如果我通过第 1 步 tp 第 3 步...我无法检查第 2 步 喜欢你可以看到enter link description here

我终于找到了另一种方法。我保留我的 :error="stateform1" 但我在服务器端另外检查，如果我有一个缺失的字段，我返回我的步骤的名称并在我返回错误时更改变量