Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

201
Views
vue2 forms using composition api

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!