Question

我才刚刚开始学习Vue并开始进行验证。

我发现了一些使用Vee-Validate的较旧的示例，但最近似乎有所变化。如何转换此代码以使用新版本的Vee-Validate？

据我所知，下面的代码正在尝试向用户发送定制的错误消息，而不是默认错误消息。

Chrome浏览器告诉我它无法读取未定义的属性“第一”，因此我认为我无法使用this.errors访问该错误。

是否仍可以在“计算机”内部访问errors？

<template>
  <div>
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input type="text" v-model="input" name="myfield">
      <span>{{ myError }}</span>
    </ValidationProvider>
  </div>
</template>

<script>
import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  },
  computed: {
    myError () {
      if (this.errors.first('myfield') === 'The myfield field is required.') {
        return 'My bespoke message'
      }
      return this.errors.first('myfield')
    }
  }
};
</script>

Answer 1

根据MartinT的回答， ValidationProvider 使用Scoped Slots，因此您不能在父组件中直接对其进行访问。但是，您仍然可以选择一些选项来实现所需的目标：

使用方法

您可以将错误 array 作为方法的参数传递，并返回所需的定制错误消息！

<template lang="html">
  <validation-provider rules="required" v-slot="{ errors }">
    <input type="text" v-model="input" name="myfield">
    <span>{{ myError(errors) }}</span>
  </validation-provider>
</template>

<script lang="js">
import { ValidationProvider } from 'vee-validate'

export default {
  components: { ValidationProvider },
  data () {
    return {
      input: null
    }
  },
  methods: {
    myError (errors) {
      if (errors[0] === 'The myfield field is required.') {
        return 'My bespoke message'
      }
      return errors[0]
    }
  }
}
</script>

但这可能不是最佳选择。

自定义规则的消息

在Vee-Validate 3.x.x中，您可以轻松地根据现有规则自定义错误消息，甚至可以创建新规则。

import { extend } from 'vee-validate'

// overwriting the 'required' rule error message.
extend('required', {
  ...required
  message: 'My bespoke message'
})

然后您可以显示定制消息。

<template lang="html">
  <validation-provider rules="required" v-slot="{ errors }">
    <input type="text" v-model="input" name="myfield">
    <span>{{ errors[0] }}</span>
  </validation-provider>
</template>

Answer 2

看看Scoped slots。简而言之，ValidationProvider组件正在使用插槽，该插槽为您提供了error对象。您可以将其视为ValidationProvider的内部对象。但是，问题是，它只能在插槽范围内（在ValidationProvider中）使用。您的用法假设错误obj是组件实例（数据，计算的，方法...）的一部分，这是不正确的。 here可以找到更多的阅读内容。

计算中的Vue访问错误

2 个答案:

使用方法

自定义规则的消息