我使用 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() { return [(v) => !!v || 'Saisissez quelque selected :-)'] },如果我不填写我的 infos.motif 字段,我希望当我更改步骤时我的第一步显示错误
我没有找到如何链接:从步骤到字段规则的错误感谢您的指导
UPDATE1我在我的第一页中添加了一个带有 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 上创建了一个示例
我迈出了一大步......这个想法是传递数据并在转换前调用我的 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;
}
})
喜欢这里
但留下另一个问题。当我在特定步骤时,其他形式不存在...如果我通过 step1 tp 步骤 3...我无法检查 step2 就像你可以看到在这里输入链接描述
最后我找到了另一种方法。我保留我的 :error="stateform1" 但我在服务器端另外检查,如果我缺少一个字段,我返回我的步骤的名称并在我返回错误时更改变量
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句