如何知道vuetify的v-text-field中哪条规则失败了?

2wnc66cl  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(204)

正如How to know if rule is failing in vuetify's v-text-field?所解释的,我可以看到任何规则是否失败,模型值为<v-form>
另外,我想知道***哪个***规则属于multi-rule 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”)正在下降?

jobtbby3

jobtbby31#

您需要根据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>

相关问题