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”中，我想验证规则并报告其正确本地化。

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

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

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

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