Question

错误：

[Vue警告]：在实例上未定义属性或方法“ $ v”，但   在渲染期间引用。确保此属性是反应性的，   在data选项中或对于基于类的组件，通过   初始化属性。看到：   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

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

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

Vue.use(Vuelidate);

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

Answer 2

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

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

methods: {

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

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

Answer 3

您必须指定此。$ v，并且不会出现错误

Answer 4

$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 5

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

所以

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

代替

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

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

5 个答案: