Error using vuelidate in quasar: "ReferenceError: process is not defined"

Question

我正在使用 Quasar 框架构建应用程序。对于表单验证，我使用 vuelidate 进行验证。

类星体版本：

» Pkg类星体........ v2.0.3

» Pkg @quasar/app...v3.0.3

查看日期：

"vuelidate": "^0.7.6"

“类似”代码基本上适用于另一个类星体 1.X 应用程序，但在类星体 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)

Answer 1

查看v0.7.6 is from Oct 23, 2020 and is compatible only with Vue 2. You are using Vue 3 which means you have to use Vuelidate v2

Error using vuelidate in quasar: "ReferenceError: process is not defined"

Error using vuelidate in quasar: "ReferenceError: process is not defined"

vue.js

vuelidate

quasar-framework