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

Question

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

显示以下警告且验证无效。

[Vue warn]: Property "$v" was accessed during render but is not defined on instance. at

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 不工作。我有一个特定的用例，我们想在 html 项目中集成 vuejs。 Vue 似乎是一个合适的选择。

Answer 1

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

以下是使用汇总重新导出为立即调用的函数表达式 (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 汇总插件解析依赖项并将它们包含在包中
vue-demi 是 @vuelidate/core 依赖项。
反过来，vue-demi 有 vue 作为依赖项，但我们会通过配置让 rollup 知道 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 之后，（它期望 Vue 在 globalThis - a.k.a: window 中定义）。

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

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

vuelidate in vue Property "$v" was accessed during render but is not defined on instance

javascript

vue.js

vue-component

vuejs2

vuejs3