在渲染期间访问了 vue 属性“$v”中的 vuelidate，但未在实例上定义答案

【问题标题】：vuelidate in vue Property "$v" was accessed during render but is not defined on instance在渲染期间访问了 vue 属性“$v”中的 vuelidate，但未在实例上定义
【发布时间】：2022-01-08 15:15:22
【问题描述】：

我正在构建一个 html 文件中包含表单的 vue 组件。需要使用 vuelidate 库验证表单。

正在显示以下警告并且验证不起作用。

[Vue 警告]：在渲染期间访问了属性“$v”，但未访问在实例上定义。在

const { required, minValue, minLength, email } = window.validators;
    const {Vuelidate} = window.vuelidate;
    const vue = {
        template:
        /*html*/
        `<div>
            <form >
                <p>
                    <input name="email" type="text" placeholder="Email" v-model="email" />
                    <span>{{$v}}</span>
                </p>
                <p>
                    <input name="password" v-model="password.password" type="password" placeholder="Password"/>
                    <span></span>
                </p>
                <p>
                    <input name="confirmPassword" v-model="password.confirm" type="password" placeholder="Confirm Password" />
                    <span></span>
                </p>
                <button @click="submitForm">Submit</button>
            </form>
        </div>
        `,
        data() {
            return {
                email: '',
                password: {
                    password: '',
                    confirm: '',
                },
            };
            
        },
        validations:  {
                email: { required },
                password: {
                    password: { required },
                    confirm: { required },
                }
        },
        mounted: function() { 
            
        },
        methods: {
            submitForm() {
                console.log(this.$v)
                alert("Form successfully submitted");
            },
        },
        };
    const app = Vue.createApp(vue);
    app.mount('#app');
    app.use(window.vuelidate.default);

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}

<!DOCTYPE html>

<html>

<head>
   <title></title>

   <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
</head>

<body>

<div class="container">

   <div class="row">

       <div id = "app">


       </div>

   </div>

</div>


<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/dist/vuelidate.min.js" integrity="sha256-La6WkedSRP9RsZaBVOO1mwpob2EhzoiYSCxmAizHsYM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.7/dist/validators.min.js" integrity="sha256-0IEcyUDILTKDOFvs84hM79AdpmIDFw1d99udusXv2vQ=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    
</script>
</body>
</html>

Vue 工作正常，但 vuelidate 不工作。我有一个特定的用例，我们想将 vuejs 集成到 html 项目中。 Vue 似乎是一个合适的选择。

【问题讨论】：

这能回答你的问题吗？ Can't validate email with Vuelidate in Vue3
您尝试使用的软件包没有与浏览器兼容的导出。一种选择是自己包装一个包，使用 webpack 或 rollup（以及其他选项），使用 @rollup/plugin-node-resolve 或 webpack 中的 node-resolve），这将在你的包中包含所有必需的依赖项并重新导出 useVuelidate。另一种选择是让@vuelidate 的维护者自己做这件事并等待。另一个是不要使用@vueildate。或者你可以切换到 Vue SPA（使用 vite 或 @vue/cli）。
你能分享任何有用的链接来手动包装和导出，以便我可以通过在 html 文件中添加脚本标签来使用 useVuelidate。
我已经完成了这些步骤，取消了我最初的答案并更新了它。应该工作。

标签： javascript vue.js vuejs2 vue-component vuejs3

【解决方案1】：

Vuelidate 似乎没有iife 导出。这意味着（afaict）它在浏览器中不可用，来自 cdn 链接。它必须由一个节点应用程序编译，它必须解决它的依赖关系。

以下是如何使用汇总重新导出为立即调用的函数表达式 (iife)：

创建一个临时文件夹，切换到它并启动一个节点项目：

mkdir test && cd test && npm init --yes

注意：如果在 Windows 命令提示符或 powershell 中运行此命令，请将 && 替换为 ;（或单独运行每个命令）。

创建index.js:

import { useVuelidate } from '@vuelidate/core';
window.useVuelidate = useVuelidate;

为您的导出添加所需的包：

npm i rollup @rollup/plugin-node-resolve @vuelidate/core vue-demi

rollup 捆绑您的文件，
node-resolve rollup 插件解析依赖项并将它们包含在包中
vue-demi 是 @vuelidate/core 依赖项。
反过来，vue-demi 具有 vue 作为依赖项，但我们会通过配置让汇总知道 vue 已在全局范围内可用，因此不应将其包含在捆绑包中。

创建rollup.config.js:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: './index.js',
  output: {
    format: 'iife',
    file: 'vuelidate.iife.js',
    globals: { vue: 'window.Vue' }
  },
  plugins: [nodeResolve()]
}

捆绑您的文件：

./node_modules/.bin/rollup --config rollup.config.js

如果一切顺利，您现在应该在同一文件夹中有一个vuelidate.iife.js 文件。
在浏览器中加载文件，在 Vue 之后，（它期望在 globalThis 中定义 Vue - 又名：window）。

看到它的工作：https://codesandbox.io/s/modest-mirzakhani-tq46j?file=/index.html

【讨论】：

我搜索了“@vuelidate/core”脚本标签，但没有运气。是否有任何与 vue3 兼容的 '@vuelidate/core' html 脚本标签？你能分享一下吗。我不能在 javascript 上使用 import，因为这不是节点项目。
我已经详细说明了如何使其在浏览器中可用。
谢谢，这解决了我的问题。