属性或方法“$v”未使用 Vuelidate 定义
Posted
技术标签:
【中文标题】属性或方法“$v”未使用 Vuelidate 定义【英文标题】:Property or method "$v" is not defined using Vuelidate 【发布时间】:2019-01-28 06:46:36 【问题描述】:错误:
[Vue 警告]:属性或方法“$v”未在实例上定义,但 在渲染期间引用。确保此属性是反应性的, 无论是在数据选项中,还是对于基于类的组件,通过 初始化属性。看: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
发现于
---> 在 resources\assets\js\components\products\Product_create.vue
我使用 Vue.js 和 Vuelidate 作为验证器, 我已经从这里https://jsfiddle.net/Frizi/b5v4faqf/ 复制并粘贴了这段代码,但它仍然不起作用:
Vue 组件:
<template >
<input v-model="$v.text.$model" :class="status($v.text)">
<!-- <pre> $v </pre> -->
</template>
<script>
import required, minLength, between from 'vuelidate/lib/validators'
export default
data()
return
text: ''
,
validations:
text:
required,
minLength: minLength(5)
,
methods:
status(validation)
return
error: validation.$error,
dirty: validation.$dirty
</script>
App.js
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter = require('vue-router').default;
window.VueAxios = require('vue-axios').default;
window.Axios = require('axios').default;
window.VueFormWizard = require('vue-form-wizard');
window.Vuelidate = require('vuelidate').default;
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueRouter,VueAxios,axios,VueFormWizard,Vuelidate);
const ProductOptionCreate = Vue.component('po-create',require('./components/products/ProductOption_create.vue'));
const ProgressModal = Vue.component('vue-modal',require('./components/ProgressModal.vue'));
const ProductIndex = Vue.component('product-list',require('./components/products/Product_index.vue'));
const productshow = Vue.component('productshow',require('./components/products/ProductOption_show.vue'));
const ProductCreate = Vue.component('product-create',require('./components/products/Product_create.vue'));
const app = new Vue(
el:'#app',
);
这段代码有什么问题?
【问题讨论】:
你没有定义$v,应该在App.js下定义 @RodrigoMata 你能告诉我它是如何工作的吗? 据我所知,Vue.use()
只接受 一个 参数。您正试图通过它五个。
抱歉,Vue.use()
采用 一个 或 两个 参数,第一个是必需的插件,第二个是可选的配置对象
哦,好的,非常感谢兄弟,如果我有五个呢?我该怎么办? @菲尔
【参考方案1】:
验证应该在组件中定义以初始化 this.$v
我有一个错字,没有意识到我在方法中声明了验证。
methods:
validations:
isUScitizen: required ,
,
我试图访问 this.$v 未定义,因为该组件没有定义验证。
【讨论】:
【参考方案2】:我认为问题在于验证是在组件的数据属性中声明的,而不是作为组件的直接属性。
所以
export default
validations:
text:
required,
minLength: minLength(5)
,
data()
return
text: ''
,
,
........
而不是
export default
data()
return
text: ''
,
validations:
text:
required,
minLength: minLength(5)
【讨论】:
【参考方案3】:$v
在您的实例上不可用的原因是您尚未实例化 Vuelidate 插件。那是因为您试图简化对Vue.use()
的调用。
您当前的Vue.use()
调用仅实例化第一个插件(VueRouter
)并将VueAxios
插件对象作为VueRouter
的配置对象传递。所有后续参数都将被忽略。
要简化对Vue.use()
的调用,不能简单地向它添加更多参数。
而不是这种错误的语法(它会破坏除第一个插件以外的所有插件的实例化):
Vue.use(VueRouter, VueAxios, axios, VueFormWizard, Vuelidate);
...你可以使用:
[[VueRouter], [VueAxios, axios], [VueFormWizard], [Vuelidate]]
.forEach(args => Vue.use(...args));
使用 Typescript:不幸的是,TS 解析器错误地将 0
参数包含为上述情况下扩展运算符的可能结果,因此您需要使用以下方法抑制它:
[
[VueRouter],
[VueAxios, axios],
[VueFormWizard],
[Vuelidate]
/* @ts-ignore: TS2557, TS wrong about array above having empty members */
].forEach(args => Vue.use(...args));
...至少现在是 ("typescript": "^3.9.7"
)。
上面的语法完全等同于:
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.use(VueFormWizard);
Vue.use(Vuelidate); // <= this is what you were missing, basically
// but your syntax also broke VueAxios and VueFormWizard install
就个人而言:虽然有点重复,但我实际上在这种情况下发现Vue.use()
语法更简洁(更具可读性)。
【讨论】:
【参考方案4】:必须指定this.$v,不会报错
【讨论】:
仅仅这么说并不能说明为什么它不会出错。解释更多会很有帮助【参考方案5】:问题是 $v 没有在组件级别定义,这是因为您的组件的顺序,您需要像这样重新排列它们:
// ... other stuff
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(Vuelidate);
const ProductOptionCreate = // ... rest of your components
【讨论】:
正在查看这个thread,它似乎与订单有关以上是关于属性或方法“$v”未使用 Vuelidate 定义的主要内容,如果未能解决你的问题,请参考以下文章
属性或方法未在 v-bind:class 中的实例上定义,但在数据中