Проблема с Vee-validate и Vuetify, Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство '$ vuetify' из null» - PullRequest
Новая
       37

Проблема с Vee-validate и Vuetify, Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство '$ vuetify' из null»

0 голосов
/ 25 марта 2020

Привет, у меня проблема с интеграцией 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, я теряю доступ к этому объекту.

Любые идеи ??

1 Ответ

2 голосов
/ 25 марта 2020

Вы не можете использовать this в шаблонах 

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

, просто удалите this, и ваш ярлык должен выглядеть следующим образом: 

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