在呈现过程中访问了VUE属性&Quot；$v&Quot；中的vuelify，但未在实例上定义

2022-02-21 00:00:00 javascript vue.js vue-component vuejs2 vuejs3

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

显示以下警告，验证不起作用。

[Vue warn]：属性&qot；$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工作正常，但vuelizer不起作用。我有一个特定的用例，我们想在HTML项目中集成Vuejs。 VUE似乎是一个合适的选择。

解决方案

Vuelide似乎没有iife导出。这意味着(AFAICT)它在浏览器中不可用，从CDN链接。它必须由节点应用程序编译，节点应用程序必须解析其依赖项。

下面介绍如何使用ROLLUP重新导出为立即调用的函数表达式(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捆绑您的文件
节点解析汇总插件解析依赖项并将其包含在捆绑包中
vue-demi是@vuelidate/core依赖项。
反过来，vue-demi具有vue作为依赖项，但是我们将通过config让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-akk.a：window中定义)。

查看其工作情况：https://codesandbox.io/s/modest-mirzakhani-tq46j?file=/index.html

相关文章