Nuxt JS - vee-validate не возвращает пользовательское сообщение - PullRequest
Новая
       69

Nuxt JS - vee-validate не возвращает пользовательское сообщение

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

vee-validate. js

import { extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'

const phone = {
  getMessage (field) {
    return `The ${field} must be a valid phone number`
  },
  validate (value) {
    const PhoneNumber = require('awesome-phonenumber')
    const pn = new PhoneNumber(value)
    return pn.isValid()
  }
}

extend('phone', phone)

использование в компоненте: 

 <ValidationProvider v-slot="{ errors }" rules="required|phone">
    <input
      v-model="number"
      placeholder="Ex. +13198832832"
      type="tel"
      name="phonenumber"
      label="Phone Number*"
      />
      <ValidationDisplay :message="errors[0]" />
 </ValidationProvider>

По некоторым причинам сообщение проверки всегда: {field} is not valid. вместо того, что я ему назначил быть.

1 Ответ

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

Необходимо указать имя поля для компонента ValidationProvider. Это то, что используется в сообщениях об ошибках. 

<ValidationProvider v-slot="{ errors }" rules="required|phone" name="Phone Number">
    <input
      v-model="number"
      placeholder="Ex. +13198832832"
      type="tel"
      name="phonenumber"
      label="Phone Number*"
      />
      <ValidationDisplay :message="errors[0]" />
 </ValidationProvider>
...