I am new to Vue and have run into an issue when trying to create a form using composition api. This is my code:
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 };
},
});
And my template looks like this:
<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>
Although everything works, I get this error in the console:
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
I have no idea what it means, could someone help me out?