Problem with Vee-validate and Vuetify, Error in render: "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')"
        ^^^^

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

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

Problem with Vee-validate and Vuetify, Error in render: "TypeError: Cannot read property '$vuetify' of null"

Problem with Vee-validate and Vuetify, Error in render: "TypeError: Cannot read property '$vuetify' of null"

javascript

vue.js

vuetify.js

vee-validate