属性或方法“$v”未使用 Vuelidate 定义

Question

错误：

[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',
    
    });

这段代码有什么问题？

Answer 1

验证应该在组件中定义以初始化 this.$v

我有一个错字，没有意识到我在方法中声明了验证。

methods: {

   validations: {
      isUScitizen: { required },
   },
}

我试图访问 this.$v 未定义，因为该组件没有定义验证。

Answer 2

我认为问题在于验证是在组件的数据属性中声明的，而不是作为组件的直接属性。

所以

export default {
     validations: {
        text: {
        required,
        minLength: minLength(5)
      },
     data() {
       return {
           text: ''
        }
       },
       
    },
    ........

而不是

export default {
     data() {
       return {
          text: ''
        }
       },
       validations: {
        text: {
        required,
        minLength: minLength(5)
      }

Answer 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() 语法更简洁（更具可读性）。

Answer 4

必须指定this.$v，不会报错

Answer 5

问题是 $v 没有在组件级别定义，这是因为您的组件的顺序，您需要像这样重新排列它们：

// ... other stuff
import 'vue-form-wizard/dist/vue-form-wizard.min.css';

Vue.use(Vuelidate);

const ProductOptionCreate = // ... rest of your components