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

Posted 2023-02-23

【中文标题】vuetify 规则功能 - 如何在验证期间访问组件标签？

【英文标题】：vuetify rule function - how to access component label during validation?

【发布时间】：2019-08-02 07:46:22

【问题描述】：

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

有什么方法可以在 Vuetify 调用的规则函数中访问组件的属性以进行验证？

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

从代码中可以看出，我已经有一个本地化字段标签的功能，我不想重新做两次或必须指定两次。在“MyRuleFuctionInMyRuleLibrary”中，我想验证规则并对其进行正确本地化的报告。

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

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

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

【参考方案1】：

使用打字稿：

<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';
    ,
  ];

【参考方案2】：

在Vuetify source code 中，rules 函数只有 1 个参数（值）。您可以通过将标签定义为数据或计算属性来解决：

<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')