我正在使用Quasar框架建立一個應用程式。 對於表單驗證,我正在使用vuelidate進行驗證。
Quasar版本:
» 類星體 Pkg........ v2.0.3
» Pkg @quasar/app... v3.0.3
驗證:
“vuelidate”:“^0.7.6”
「類似」的程式碼在另一個Quasar 1.X應用程式中基本上可以工作,但在Quasar 2.x中失敗:
引導設定:
import Vuelidate from 'vuelidate'; export default ({ app }) => { app.use(Vuelidate); };
元件:
<template> <div> <q-input filled label="Tweets" type="text" v-model="$v.tweets.$model" :error="$v.tweets.$error" @blur="$v.tweets.$touch" /> </div> </template> <script> import { defineComponent } from "vue"; import { required, numeric } from "vuelidate/lib/validators"; export default defineComponent({ name: "StatsForm", data() { return { tweets: null, }; }, validations: { tweets: { required, numeric }, }, }); </script>
使用元件的程式碼:
<template> <q-page class="flex justify-center q-ma-md"> <div class="column"> <h1>Twitter Profile Performance Report</h1> <stats-form /> </div> </q-page> </template> <script> import { defineComponent } from "vue"; import StatsForm from "../components/StatsForm.vue"; export default defineComponent({ name: "PerformanceReport", components: { "stats-form": StatsForm, }, }); </script> <style> h1 { font-size: 2.5em; font-weight: 400; line-height: 1em; } </style>
我在瀏覽器中得到以下錯誤:
vue-router.esm-bundler.js?f6c4:3248 ReferenceError: process is not defined at eval (withParams.js?8b99:7) at Object../node_modules/vuelidate/lib/withParams.js (vendor.f2dee45ef25904390a82.hot-update.js:271) at __webpack_require__ (app.js:195) at fn (app.js:460) at eval (common.js?bca9:14) at Object../node_modules/vuelidate/lib/validators/common.js (vendor.f2dee45ef25904390a82.hot-update.js:62) at __webpack_require__ (app.js:195) at fn (app.js:460) at eval (alpha.js?d360:8) at Object../node_modules/vuelidate/lib/validators/alpha.js (vendor.f2dee45ef25904390a82.hot-update.js:18)
Vuelidate v0.7.6 是2020年10月23日發布的版本,僅與Vue 2相容。您正在使用Vue 3,這表示您必須使用Vuelidate v2