NUXT 2& VUELITARE 2不正常工作

发布于 2025-01-29 02:53:24 字数 2181 浏览 3 评论 0 原文

我已经安装了vuelate 2,以验证我的nuxtjs项目中的表单。我按照

package.json

"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"@vue/composition-api": "^1.6.1",
"@vuelidate/core": "^2.0.0-alpha.41",
"@vuelidate/validators": "^2.0.0-alpha.29",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"webpack": "^4.46.0"
},

插件/coptions-api.js for

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

/vuelidate.js

import Vue from 'vue'
import Vuelidate from 'vuelidate'   
Vue.use(Vuelidate)

nuxt.config.js

plugins: [
{ src: '~/plugins/composition-api.js' },
{ src: '~/plugins/vuelidate' },
],

组件/表单

<template>
<form @submit.prevent="submitForm">
  <div>
    <label for="name">Name:</label>
    <input v-model="name" type="text" name="name" />
  </div>

  <button>Submit</button>
</form>
</template />

<script>
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
export default {
  setup() {
    return { v$: useVuelidate() }
  },
  data() {
    return {
      name: '',
    }
  },
  methods: {
    submitForm() {
      this.v$.$validate().then((isFormValid) => {
        if (isFormValid) {
          console.log('valid!!!', this.$v)
        } else {
          return console.log('false', this.$v)
        }
      })
    },
  },
  validations() {
    return {
      name: {
        required,
      },
    }
  },
}
</script>

  1. 插件 在模板中我获得错误无法读取未定义的的属性'名称'。
  2. 当我调用submitform方法时, isformvalid 的验证正常工作。当我打开控制台以观察 $ v.Errors $ v.dirty $ v.invalid ,我看到了此错误数组:

[异常:randerror:watcher.depper.depper.depper.dever.depport(webpack-internal ... )超过的最大呼叫堆栈大小

I have installed vuelidate 2 to validate forms in my NuxtJS project. I followed instructions for installation and setup according to vuelidate documentation. This is how my setup files look until now:

Package.json

"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"@vue/composition-api": "^1.6.1",
"@vuelidate/core": "^2.0.0-alpha.41",
"@vuelidate/validators": "^2.0.0-alpha.29",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"webpack": "^4.46.0"
},

plugins/composition-api.js for @vue/composition-api

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

plugins/vuelidate.js

import Vue from 'vue'
import Vuelidate from 'vuelidate'   
Vue.use(Vuelidate)

nuxt.config.js

plugins: [
{ src: '~/plugins/composition-api.js' },
{ src: '~/plugins/vuelidate' },
],

components/form.vue

<template>
<form @submit.prevent="submitForm">
  <div>
    <label for="name">Name:</label>
    <input v-model="name" type="text" name="name" />
  </div>

  <button>Submit</button>
</form>
</template />

<script>
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
export default {
  setup() {
    return { v$: useVuelidate() }
  },
  data() {
    return {
      name: '',
    }
  },
  methods: {
    submitForm() {
      this.v$.$validate().then((isFormValid) => {
        if (isFormValid) {
          console.log('valid!!!', this.$v)
        } else {
          return console.log('false', this.$v)
        }
      })
    },
  },
  validations() {
    return {
      name: {
        required,
      },
    }
  },
}
</script>

These are a couple of problems that occur:

  1. When I place v-if="v$.name.$error" inside template I get the error Cannot read property 'name' of undefined.
  2. When I call submitForm method, the validation of isFormValid works properly. When I open the console to observe $v.errors, $v.dirty, or $v.invalid, I see this error inside the array:

[Exception: RangeError: Maximum call stack size exceeded at Watcher.depend (webpack-internal...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文