Vue.js 计算机内部的Vue访问错误

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

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

据我所知，下面的代码试图在出现错误时向屏幕发送一条定制的错误消息，而不是默认消息

Chrome浏览器告诉我它无法读取undefined的属性'first'，因此我认为我无法使用

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


{{myError}}
从“vee validate”导入{ValidationProvider}；
导出默认值{
组成部分：{
验证提供程序
},
计算：{
myError（）{
if（this.errors.first（'myfield'）=='myfield字段是必需的'）{
返回“我的定制信息”
}
返回this.errors.first（'myfield'）
}
}
};
看一看。简而言之，ValidationProvider组件使用的是一个插槽，它为您提供了错误对象。您可以将其视为ValidationProvider的内部对象。但是，问题是，它只能在插槽范围内使用（在ValidationProvider内）。您的用法假设errors obj是组件实例的一部分（数据、计算、方法…），这是不正确的。可以找到更多信息。
如的回答，ValidationProvider使用，因此您无法在父组件中直接访问它。但是，您仍然有一些选项可以实现您的目标：

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


{{myError（errors）}
从“vee validate”导入{ValidationProvider}
导出默认值{
组件：{ValidationProvider}，
数据（）{
返回{
输入：空
}
},
方法：{
myError（错误）{
如果（错误[0]=“需要myfield”。）{
返回“我的定制信息”
}
返回错误[0]
}
}
}

但这可能不是最好的选择

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

从'vee validate'导入{extend}
//覆盖“必需”规则错误消息。
扩展（'必需'{
…必需
信息：“我的定制信息”
})

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


{{错误[0]}