Marc Form.vue

Form.vue

<script setup>
import { reactive } from "vue";
import { defineEmits } from "vue";
import { useApi } from '@/composables/useApi'

const { coucou } = useApi();

const emit = defineEmits(["recupereLeForm"]);

const props = defineProps({
  type: String,
});

const form = reactive({
  first_name: undefined,
  last_name: undefined,
  email: undefined,
  city: undefined,
  birthdate: undefined,
});

const DOMAINES = ["Agroalimentaire", "Transport", "Menuiserie", "Restauration"];

const VILLES = ["Brest"];

const sendForm = async () => {
  coucou()
  // console.log("envoyé depuis le form");
  // emit("recupereLeForm", form);
};
</script>

<template>
  <v-form>
    <v-card>
      <v-container>
        <v-row>
          <v-col cols="12" md="12">
            <v-text-field
              v-model="form.first_name"
              label="Prénom"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="12">
            <v-text-field
              v-model="form.last_name"
              label="Nom"
              required
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="12">
            <v-text-field
              v-model="form.email"
              label="E-mail"
              required
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="12">
            <v-select
              label="Ville"
              v-model="form.city"
              :items="VILLES"
            ></v-select>
          </v-col>
          <v-col cols="12" md="12">
            <v-text-field
              v-model="form.birthdate"
              label="Date de naissance"
              required
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="12">
            <v-select
              v-if="props.type === 'parrain'"
              label="Domaine de compétences"
              v-model="form.domaines"
              :items="DOMAINES"
            ></v-select>
          </v-col>
        </v-row>
        <v-btn @click="sendForm">Enregistrer</v-btn>
      </v-container>
    </v-card>
  </v-form>
</template>

<style scoped>
.v-form {
  background-color: #ffffff;
}
button {
  background-color: #27c7d4;
  color: #ffffff;
}
button:hover {
  background-color: #ea5863;
  color: #fe9063;
  transition: all 0.2s ease-in-out;
}
</style>