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

vuelidate in vue Property quot;$vquot; was accessed during render but is not defined on instance(在呈现过程中访问了VUE属性Quot;$vQuot;中的vuelify,但未在实例上定义)

本文介绍了在呈现过程中访问了VUE属性&Quot;$v&Quot;中的vuelify,但未在实例上定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建一个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):

  1. 创建临时文件夹,切换到该文件夹,启动节点项目:
mkdir test && cd test && npm init --yes

注意:如果在Windows命令提示符或Powershell中运行此命令,请将 &&替换为;(或仅单独运行每个命令)。

  1. 创建index.js
import { useVuelidate } from '@vuelidate/core';
window.useVuelidate = useVuelidate;
  1. 添加导出所需的包:
npm i rollup @rollup/plugin-node-resolve @vuelidate/core vue-demi
  • rollup捆绑您的文件
  • 节点解析汇总插件解析依赖项并将其包含在捆绑包中
  • vue-demi@vuelidate/core依赖项。
    反过来,vue-demi具有vue作为依赖项,但是我们将通过config让ROLLUP知道vue已经在全局作用域中可用,因此它不应该包含在包中。
  1. 创建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()]
}
  1. 捆绑您的文件:
./node_modules/.bin/rollup --config rollup.config.js
  1. 如果一切正常,您现在应该在同一文件夹中有一个vuelidate.iife.js文件。
  2. 在Vue之后将文件加载到您的浏览器中(期望VueglobalThis-akk.a:window中定义)。

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

这篇关于在呈现过程中访问了VUE属性&Quot;$v&Quot;中的vuelify,但未在实例上定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:在呈现过程中访问了VUE属性&Quot;$v&Quot;中的vuelify,但未在实例上定义

基础教程推荐