从vform导入HasError报错提示不存在对应导出项该如何解决

问题原因 #

你当前安装的是vform 2.x及以上的新版本，该版本已经移除了内置的HasError、AlertError组件，官方提供的可导出模块仅包含报错提示中的Errors、Form和默认导出项，所以沿用旧版本的导入语法会触发找不到导出项的报错。

解决方案 #

方案1：降级到vform 1.x版本（适配Vue2项目） #

如果你的项目基于Vue2开发，直接降级到支持内置组件的1.x版本即可解决问题：

1. 先卸载当前版本vform：
   npm uninstall vform
2. 安装1.x版本的vform：
   npm install vform@1.0.1
   安装完成后重启项目，你现有的导入和注册代码即可正常运行。

方案2：适配新版本的使用规则 #

如果需要使用新版本vform的特性，可以通过以下两种方式处理错误提示：

• 直接在模板中通过Form实例的errors对象判断展示错误信息，示例：

<template>
  <div>
    <input v-model="form.username" type="text">
    <!-- 单个字段错误提示 -->
    <span v-if="form.errors.has('username')" class="text-danger">
      {{ form.errors.get('username') }}
    </span>

    <!-- 全局表单错误提示 -->
    <div v-if="form.errors.any()" class="alert alert-danger">
      表单存在错误，请修正后提交
    </div>
  </div>
</template>

• 如果你需要沿用原来的全局组件调用方式，可以自行封装对应组件后注册：

import { Form, Errors } from 'vform'

// 封装HasError组件
const HasError = {
  name: 'HasError',
  props: ['form', 'field'],
  template: `<span v-if="form.errors.has(field)" class="text-danger">{{ form.errors.get(field) }}</span>`
}
// 封装AlertError组件
const AlertError = {
  name: 'AlertError',
  props: ['form'],
  template: `<div v-if="form.errors.any()" class="alert alert-danger">请修正表单错误后重试</div>`
}

// 注册全局组件
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

内容的提问来源于stack exchange，提问作者Lorn Titya