当必填字段为空时如何在 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 chose :-)'] }, 如果我不填写我的 infos.motif 字段

，我想当我更改步骤时我的第一步显示错误

我不知道如何 link : 从步骤到字段规则的错误感谢您的指导

更新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

我迈出了一大步...我的想法是传递数据并在 before-transtion 上调用我的检查表函数

<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" 但我在服务器端另外检查，如果我有一个缺失的字段，我 return 我的步骤的名称并在 [=26= 中出错时更改变量]

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

How show error in Quasar Stepper when required field is empty

javascript

vue.js

quasar

stepper

quasar-framework