Vuelidate, я могу наследовать пользовательский метод через mixin? - PullRequest
Новая
       13

Vuelidate, я могу наследовать пользовательский метод через mixin?

0 голосов
/ 10 июня 2019

Используя Veulidate, используя VueJS 2 в проекте, построенном с использованием Vue CLI, я просто пытаюсь использовать собственный метод для проверки номера телефона.Метод исходит из глобального миксина, расположенного в main.js.

main.js 

Vue.mixin({
  methods: {
    vd_phone(val) {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false
  }
});

form.vue 

validations: {
  phone: {
    required,
    phone: this.vd_phone
  }
}

Кажется достаточно простым, верно?Снова и снова я получаю Cannot read property of 'vd_phone' of undefined.Попытался vd_phone, this.vd_phone, this.vd_phone() и т. Д.

Также попытался поместить метод в глобальную опцию методов (вместо mixin) и попытаться получить к нему доступ через $ root, например так:

main.js 

var vm = new Vue({
  router, el: '#app', store,
  methods: {
    vd_phone() {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false;
    }
  },
  render: h => h(App)
});

Та же проблема!В моем файле form.vue я пытался получить доступ к этому методу, используя this.$root.vd_phone, $root.vd_phone и т. Д. Без кубиков.

Это все, что я нашел по теме: https://github.com/vuelidate/vuelidate/issues/308,, но, похоже,говорить о наследовании целых свойств валидатора, а не просто метода.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 10 июня 2019

Вы используете фабричный шаблон для создания экземпляра функции из ее источника для использования в других файлах. Для этого вы должны выполнить экспорт из исходного файла, чтобы другие файлы могли его импортировать, например:

main.js 

export default {
      vd_phone(val) {
         var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
         return phonePattern.test(val) ? true : false;
   }
}

Затем импортируйте файл туда, где вам когда-либо понадобится эта функция, и вы получите к нему доступ.

...