javascript - Vee验证和Vuetify问题，渲染错误:“TypeError:无法读取null的属性'$ vuetify'”

嗨，我对Vee-validation和Vuetify的集成存在问题：这是我的配置：

import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: '{_field_} can not be empty'
});

Vue.component('ValidationProvider', ValidationProvider);

这是我的代码：

 <ValidationProvider v-slot="{ errors }" name="Name" rules="required|max:10">
    <v-text-field :label="this.$vuetify.lang.t('$vuetify.campaign.link')"
              required
              v-model="campaign.link"
              :error-messages="errors"
     ></v-text-field>
 </ValidationProvider>

这是我的错误跟踪：

 Error in render: "TypeError: Cannot read property '$vuetify' of null"

found in

---> <ValidationProvider>
...

当我删除：label行（使用i18n）以获取一些纯文本时，它会起作用，如下所示：

<ValidationProvider v-slot="{ errors }" name="Name" rules="required|max:10">
    <v-text-field label="some label"
              required
              v-model="campaign.link"
              :error-messages="errors"
     ></v-text-field>
 </ValidationProvider>

我不知道，为什么如果我用ValidationProvider包围组件，那么我将失去对该对象的访问权限。

有任何想法吗？？

最佳答案

您不能在模板中使用this

:label="this.$vuetify.lang.t('$vuetify.campaign.link')"
        ^^^^

只需删除this，您的标签应如下所示：

:label="$vuetify.lang.t('$vuetify.campaign.link')"