属性或方法“$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 定义的主要内容,如果未能解决你的问题,请参考以下文章

[Vue 警告]:未定义属性或方法“$v”

属性或方法未在 v-bind:class 中的实例上定义,但在数据中

Vuelidate在页面加载时多次触发

如何修复 VueJS 中的“未定义属性或方法”错误

使用 vuex 和 vue 路由器的实例上未定义属性或方法“X”

“属性或方法未在实例上定义,但在渲染期间引用”