正如所解釋的如何知道 vuetify 的 v-text-field 中的規則是否失敗?,我可以看到模型值為 的任何規則是否失敗<v-form>。
此外,我想知道多規則 v-text-area 屬于哪個規則。例如,使用以下組件,
<template>
<div>
<v-form v-model="valid">
<v-text-field
v-model="model"
type="number"
label="Fetch Frequency"
:rules="[rules.loanMin, rules.required]"
min="100"
suffix="seconds"
></v-text-field>
</v-form>
</div>
</template>
<script>
export default {
data: function(){
return {
device: "",
model: "",
item: "",
rules: {
required: v => !!v || 'Required.',
loanMin: v => (v && v >= 100) || 'minimum interval is 100 min',
}
}
}
}
</script>
有什么方法可以知道哪個規則(“required”或“loanMin”)正在下降?
uj5u.com熱心網友回復:
您將需要根據以下錯誤訊息進行區分errorBucket:
<template>
<div>
<v-form v-model="valid">
<v-text-field
ref="text"
v-model="model"
type="number"
label="Fetch Frequency"
:rules="[rules.loanMin, rules.required]"
min="100"
suffix="seconds"
></v-text-field>
</v-form>
</div>
</template>
<script>
export default
{
data()
{
return {
textRef: null,
device: "",
model: "",
item: "",
rules:
{
required: v => !!v || 'Required.',
loanMin: v => (v && v >= 100) || 'minimum interval is 100 min',
}
}
},
computed:
{
failedValidation()
{
if (!this.textRef) return '';
switch (this.textRef.errorBucket[0])
{
case 'Required.': return 'required';
case 'minimum interval is 100 min': return 'loanMin';
default: return '';
}
},
},
mounted()
{
this.textRef = this.$refs.text;
},
}
</script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/537461.html
