javascript - Vee-validate 和 Vuetify 出现问题，渲染错误 : "TypeError: Cannot read property ' $vuetify' of null"

Question

您好，我在 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 包围一个组件，我就失去了对该对象的访问权限。

有什么想法吗？

Answer 1

您不能在模板中使用this

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

只需删除此，您的标签应如下所示:

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