vue.js - 未使用 Vuelidate 定义属性或方法 "$v"

Question

错误:

[Vue warn]: Property or method "$v" is not defined on the instance butreferenced during render. Make sure that this property is reactive,either in the data option, or for class-based components, byinitializing the property. See:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at 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

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

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

Vue.use(Vuelidate);

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