Vuelidate $params 设置为空答案

【问题标题】：Vuelidate $params set to nullVuelidate $params 设置为空
【发布时间】：2021-08-24 08:36:52
【问题描述】：

Vue 和 Vuelidate 有一个复杂的问题，基本上我们用 Vue 和 Vuelidate 做了一个 Vue 组件库。该库是使用 Rollup 构建的。

某些组件的验证方式如下：

import { maxLength } from 'vuelidate/lib/validators'

...

validations() {
    return {
        value: {
            maxLength: maxLength(4)
        }
    }
}

...

这意味着数字4 应该可以作为参数在错误消息中使用。这适用于 lib 中的测试，也适用于可以从 lib 运行的独立 Vue 应用程序。 $v.value.$params 因此被定义为：

{
    maxLength: {
        type: "maxLength",
        max: 4
    }
}

然后可以在错误消息中使用 4，例如“您不能输入超过 4 个字符”。

但是，当 lib 导入到另一个应用程序时，$v.value.$params 设置为 null。因此错误信息变为：“you cannot enter more than characters”。

我们在这方面发现了几个问题（https://github.com/vuelidate/vuelidate/issues/302、https://github.com/vuelidate/vuelidate/issues/460），但建议的解决方案似乎都不起作用。

感谢任何帮助！

【问题讨论】：

标签： javascript vue.js rollup vuelidate

【解决方案1】：

很遗憾，my patch 未被接受。我找不到其他方法来修复它，所以我现在在本地修补了 vuelidate 以使用修补后的 withParams.js 文件而不带条件：

lib/webpack/patches/vuelidate-withParams.js

'use strict';

Object.defineProperty(exports, '__esModule', {
   value: true
});
exports.default = void 0;
var withParams = require(__dirname + '/../../../node_modules/vuelidate/lib/params').withParams;
var _default = withParams;
exports.default = _default;

webpack 配置

{
   plugins: [
      new webpack.NormalModuleReplacementPlugin(
         /vuelidate\/lib\/withParams\.js/,
         path.resolve(config.basePath, 'lib/webpack/patches/vuelidate-withParams.js')
      ),
   ],
   /* ... */
}

【讨论】：