vue2 表单使用组合 api

Question

我是 Vue 新手，在尝试使用组合 API 创建表单时遇到了问题。 这是我的代码：

import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  name: "Register",
  setup() {
    const form = ref(null);
    const submitted = ref(false);
    const valid = ref(false);
    const checkbox = ref(false);
    const email = ref(null);
    const emailRules = [
      (v) => !!v || "E-mail is required",
      (v) => /.+@.+/.test(v) || "E-mail must be valid",
    ];

    const submit = () => {
      submitted.value = true;
      console.log(form.value.validate());
    };

    return { form, checkbox, email, emailRules, valid, submitted, submit };
  },
});

我的模板如下所示：

<template>
  <base-login-page>
    <v-tabs>
      <v-tab>Sign up</v-tab>
      <v-tab>Sign in</v-tab>

      <v-tab-item class="section">
        <v-form ref="form" v-model="valid" lazy-validation>
          <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            outlined
          ></v-text-field>

          <v-checkbox
            v-model="checkbox"
            :rules="[(v) => !!v || 'You must agree to continue!']"
            label="Do you agree?"
            required
          ></v-checkbox>

          <base-button
            :disabled="!valid || !submitted"
            color="primary"
            class="mr-4"
            @click="submit()"
          >
            Validate
          </base-button>
        </v-form>
      </v-tab-item>
      <v-tab-item>Content for Item Two</v-tab-item>
    </v-tabs>
  </base-login-page>
</template>

<script src="./register.component.ts" lang="ts"></script>
<style src="./register.component.scss" lang="scss" scoped></style>

虽然一切正常，但我在控制台中收到此错误：

[Vue 警告]：避免在运行时向 Vue 实例或其根 $data 添加响应式属性 - 在 data 选项中预先声明它。

我不知道这是什么意思，有人可以帮我吗？

Answer 1

尝试在setup() 函数中声明:rules="[(v) => !!v || 'You must agree to continue!']" 和:disabled="!valid || !submitted" 之类的emailRules 为ref。