"errors" is not defined on the instance but referenced during render.?

"errors" is not defined on the instance but referenced during render.?

在这个login.vue组件内确实没有定义errors,但是课程内容中也没有呀?

而且即使是在下面定义了errors,还是会显示

"TypeError: _vm.errors.first is not a function"


请老师指导下,谢谢!


<template>
<div class="layui-container fly-marginTop">
<div class="fly-panel fly-panel-user" pad20>
<div class="layui-tab layui-tab-brief" lay-filter="user">
<ul class="layui-tab-title">
<li class="layui-this">登入</li>
<li><router-link :to="{name: 'reg'}">注册</router-link></li>
</ul>
<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
<div class="layui-tab-item layui-show">
<div class="layui-form layui-form-pane">
<form method="post">
<div class="layui-form-item">
<label for="L_email" class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" v-model="username" v-validate="'required|email'" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">
<span style="color: #c00;">{{errors.first('username')}}</span>
</div>
</div>
<div class="layui-form-item">
<label for="L_pass" class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" v-model="password" v-validate="'required|min:6'" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">
<span style="color: #c00;">{{errors.first('password')}}</span>
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<label for="L_vercode" class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" name="code" v-model="code" v-validate="'required|leng:4'" placeholder="请输入验证码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">
<span style="color: #c00;">Hello</span>
</div>
</div>
<div class="layui-form-mid">
<span style="color: #c00;">{{errors.first('code')}}</span>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn">立即登录</button>
<span style="padding-left:20px;">
<router-link :to="{name: 'forget'}">忘记密码?</router-link>
</span>
</div>
<div class="layui-form-item fly-form-app">
<span>或者使用社交账号登入</span>
<a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-qq" title="QQ登入"></a>
<a href="" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-weibo" title="微博登入"></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'login',
data () {
return {
username: '',
password: '',
code: '',
svg: ''
}
}
}
</script>

<style lang="scss" scoped>
</style>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
Brian 2021-07-19 15:05:15

在V3的veevalidate中是需要slot的https://vee-validate.logaretm.com/v3/guide/basics.html#validation-provider


http://img1.sycdn.imooc.com//climg/60f52403090dbfe315740282.jpg


而你从你的代码使用来看使用的是v2,v2可以参考如下的链接:https://vee-validate.logaretm.com/v2/guide/messages.html


  • 提问者 幕布斯3322991 #1

    老师,谢谢回复。我看到您提供的v2的链接,应该是一个自定义的错误提示生成函数?App.vue的<script> 标签里吗?    


    其实我更想问的是,还是【

    "errors" is not defined on the instance but referenced during render.?

    】生成的原因。


    因为我看老师课件中也没有在

    data () {
    return {
    username: '',
    password: '',
    code: '',
    svg: ''
    }
    }

    里特意定义 “errors”却没有报错。谢谢!

    2021-07-19 15:22:37
  • Brian 回复 提问者 幕布斯3322991 #2

    你检查一下你全局有没有引入 veevalidate v2

    import Vue from 'vue';
    import VeeValidate from 'vee-validate';

    Vue.use(VeeValidate);


    如果没有引入 ,按照vue的语法,errors没有定义,所以无法使用模板语法​,所以才会报错。

    2021-07-19 15:28:07
  • 提问者 幕布斯3322991 回复 Brian #3

    老师谢谢回复,的确在main.js 中缺少引入语句。但是引入终端和浏览器分别显示警告和报错如下,

    还能支支招么?

    http://img1.sycdn.imooc.com//climg/60f754b70909a34312710772.jpg

    http://img1.sycdn.imooc.com//climg/60f755210924f0eb14230596.jpg

    2021-07-21 07:00:41
Brian 2021-07-17 22:55:27

我看到你问到同学了


或者,可以查看示例:https://codesandbox.io/s/y3504yr0l1?initialpath=/%23/form&module=/src/components/Form.vue&file=/src/components/Form.vue

  • 提问者 幕布斯3322991 #1

    谢谢老师回复。其实同学讲的v-slot我不太明白是应该插入在哪里。您给的示例中没有看了也没有v-slot的内容,而且和课件的内容差别较大。是否可以在我贴出的内容本身基础上发现问题的呢?还是要传比如gist哪里可以帮忙查证下?谢谢

    2021-07-17 23:39:07
  • Brian 回复 提问者 幕布斯3322991 #2

    在v2中不需要slot,在v3中需要:https://vee-validate.logaretm.com/v3/guide/basics.html#validation-provider

    2021-07-19 15:03:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师