NUXT 2& VUELITARE 2不正常工作
我已经安装了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"
},
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>
。
- 插件 在模板中我获得错误
无法读取未定义的
的属性'名称'。 - 当我调用submitform方法时,
isformvalid
的验证正常工作。当我打开控制台以观察$ v.Errors
,$ v.dirty
或$ v.invalid
,我看到了此错误数组:
[异常:randerror:watcher.depper.depper.depper.dever.depport(webpack-internal ...
)超过的最大呼叫堆栈大小
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论