Question

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

是否可以通过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>

您必须定义一个吸气剂才能获取组件属性：

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

在Saving best model in Keras中，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')
     }
   }
 }

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

2 个答案: