Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

203
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda