Vuetify规则功能 - 如何在验证期间访问组件标签

Question

我想访问其"规则"函数中组件的标签属性，以便我可以在错误消息中返回（已经）本地化字段名称。

是否有任何方法可以访问由Vuetify命令进行验证的规则函数中组件的属性？

 <v-text-field
              v-model="obj.count"
              :counter="10"
              :label="this.$locale.get('WidgetCount')"
              :rules="MyRuleFunctionInMyRuleLibrary()"
              name="count"
              required
            ></v-text-field>

可以看出，在代码中可以看出，我已经有一个可以本地化字段标签的函数，我不想重新进行两次或必须两次指定。在" Myrulefuctioninmyrulelibrary"中，我想验证该规则并报告正确的本地化。

我知道我只能通过我的规则函数中的本地化文本键，但这会创建冗余，因为我必须在模板中两次键入它，而且我还需要控件/组件的其他一些属性，所以我宁愿宁愿通过或可以访问组件本身。我已经尝试将"此"传递给组件，例如：

 :rules="MyRuleFunctionInMyRuleLibrary(this, obj.count)"

但是，在这种情况下，这似乎是页面/表单上的所有内容，而不是单个组件本身。

Answer 1

使用Typescript：

<v-text-field v-model="volume.sizePerInstance" :rules="sizePerInstanceRules" :label="$t('volumes.sizePerInstance') + '  (GB)'" type="number" step="0.01" required min="0" color="#0cc2aa"></v-text-field>

您必须定义一个getter才能获取要素到组件属性：

get sizePerInstanceRules() {
  return [
    (v: number) => v && v > 0 || 'Max size must be greater than 0',
    (v: any) => v && !isNaN(v) || 'Max size must be a number',
    (v: number) => {
      return this.maxValue >= v || 'Exceeded limit';
    },
  ];
}

Answer 2

在vuetify源代码中， rules函数只有1个参数（value）。您可以通过将标签定义为数据或计算属性来处理：

<v-text-field
   v-model="obj.count"
   :counter="10"
   :label="label.count"
   :rules="MyRuleFunctionInMyRuleLibrary()"
   name="count"
   required
 ></v-text-field>

将标签添加到数据

 data: () => ({
   label: {
     count: this.$locale.get('WidgetCount')
   }
 })

然后，您可以通过this.label.count

访问验证功能中的本地化标签

您可能想观看语言更改以手动更改标签：

 watch: {
   locale: function () {
     this.label = {
       count: this.$locale.get('WidgetCount')
     }
   }
 }