【问题标题】:Vue plugin vee-validate not installing properlyVue插件vee-validate未正确安装
【发布时间】:2018-08-24 23:06:06
【问题描述】:

我正在尝试使用vee-validate 插件进行表单验证而不使用npm install --save,因此我将dist 文件夹中的文件复制到我的项目中,但由于某种原因我无法正确使用该插件。

这就是我在 pug 文件 register.pug 中将插件作为脚本调用的方式:

block main-content
  .article#register
  form
    input(
      v-model="email"
      v-validate.initial="'required|email'"
      :class="{'input': true, 'is-danger': errors.has('email') }")
block page-specific-scripts
  script(data-minjs-group="register" src="/libs/vue/vee-validate.js")
  script(data-minjs-group="register" src="/scripts/onboarding/register.js")

这是register.js

(function(doc, win) {
  'use strict';

  var register = new Vue({ 
    el: '#register',
    data: {
      email: ''
    }
  });
})(document, window);

当我重新加载页面时,我收到以下消息:“属性或方法“错误”未在实例上定义,但在渲染期间被引用。”这不应该是这样,因为我认为errors 是 vee-validate 插件的内置属性。

【问题讨论】:

  • 同样的问题。我尝试了 vee-validate 3.1.3 版,但没有用。但我尝试使用 2.0.6 版本,它对我有用。

标签: vue.js pug vee-validate


【解决方案1】:

你可能还没有添加这个。

Vue.use(VeeValidate);

(在new Vue前加上)

【讨论】:

  • 我不允许在我的脚本中使用 import 语句。因此,我无法使用 Vue.use 注册 vee-validate。我觉得这很奇怪,因为我正在使用另一个插件 vue-infinite-scroll 并以相同的方式安装它,它只是自动注册指令而无需额外配置。
  • vee-validate.js 将在您的浏览器环境中创建一个名为VeeValidate 的全局变量,就像Vue 是一个全局变量一样。只要您在加载vee-validate.js 之后执行Vue.use(VeeValidate),它就会起作用。不同的插件需要不同的用法。这是正常的。
  • 谢谢!但是,我如何能够在我的 register.js 文件中使用 VeeValidate 的方法? VeeValidate.extend 生成一个错误,指出它不是函数。怎么样?
  • 你想要的大概是VeeValidate.Validator.extend
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-08-13
  • 2020-12-20
  • 1970-01-01
  • 2020-02-07
  • 2018-11-27
  • 2018-11-30
  • 2015-10-09
相关资源
最近更新 更多