computed 中的 Vue 访问错误

Question

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

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

据我所知，如果出现错误，下面的代码会尝试向屏幕发送定制的错误消息，而不是默认消息。

Chrome 浏览器告诉我它无法读取未定义的属性 'first'，所以我不认为我可以使用 this.errors 访问错误。

'computed'里面的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

看看Scoped slots. In a nutshell, ValidationProvider component is using a slot, which provides you with errors object. You can think of it as an internal object of ValidationProvider. However, the problem is, it can only be used inside of the slot scope (within ValidationProvider). Your usage assumes, that errors obj is part of your component instance (either data, computed, method...), which is not true. More reading can be found here。

Answer 2

如 , ValidationProvider uses Scoped Slots 所回答，因此您无法在父组件中直接访问它。但是，您仍然有一些选择来实现您想要的：

使用方法

您可以将错误 [=30=]array 作为方法的参数传递，并 return 您想要的定制错误消息！

<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>

computed 中的 Vue 访问错误

Vue access errors inside computed

vue.js

vee-validate

使用方法

自定义规则的消息