Vee-validate 和 Vuetify 的问题，渲染错误：“TypeError：无法读取 null 的属性‘$vuetify’”

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

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

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