NuxtJS - vee-validate 不返回自定义消息答案

【问题标题】：NuxtJS - vee-validate doesn't return custom messageNuxtJS - vee-validate 不返回自定义消息
【发布时间】：2020-06-30 19:59:41
【问题描述】：

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. 而不是我指定的。

【问题讨论】：

标签： vue.js vuejs2 nuxt.js vee-validate

【解决方案1】：

您需要在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>

【讨论】：

【解决方案2】：

对于像我这样的未来 Google 旅行者

要解决此问题，您需要将 getMessage 替换为 message

所以你应该结束

  message: field => {
    return `The ${field} must be a valid phone number`
  },

【讨论】：