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

Question

错误：

[Vue 警告]：属性或方法“$v”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https : //vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

在发现

---> 在资源\资产\js\组件\产品\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>

应用程序.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