Formularios

En Vue.js, puedes trabajar con formularios utilizando la directiva v-model para crear enlaces bidireccionales entre los elementos del formulario y las propiedades de datos de Vue. Esto permite que los cambios en los elementos del formulario se reflejen automáticamente en los datos de Vue y viceversa.

Puedes agregar validación adicional, aplicar estilos condicionales y realizar otras acciones relacionadas con el formulario utilizando las capacidades de Vue.js y las directivas adicionales. Además, puedes utilizar bibliotecas de validación de formularios como Vuelidate o vuelidation para validar y gestionar los formularios de manera más avanzada en tus aplicaciones Vue.js.

v-model

<template>
  <form>
    <input type="text" v-model="inputText" />
    <input type="checkbox" v-model="agree" id="agree" />
    <label for="agree">Acepto los términos y condiciones</label>
    <select v-model="country">
      <option value="Spain">Spain</option>
      <option value="UK">UK</option>
      <option value="France">France</option>
    </select>
  </form>
  <h3>{{ inputText }}</h3>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  let inputText = ref('');
  let agree = ref(true);
  let country = ref('Spain');
</script>

<style scoped></style>

Ejercicio

Vamos a crear un nuevo proyecto

vue create teacher

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?   
Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Create TeacherForm.vue, en ello estamos creado un formulario para agregar un listado de profesores en un tabla junto a las materias que dicta.

<template>
  <section>
    <h3>Añadir Profesor</h3>
    <div>
      <label for="name">Nombre:</label>
      <input type="text" id="name" v-model="teacher.teacherName" />
    </div>
    <div>
      <label for="lastname">Apellidos:</label>
      <input type="text" id="lastname" v-model="teacher.surname" />
    </div>
    <div>
      <label for="dni">DNI:</label>
      <input type="text" id="dni" v-model="teacher.dni" />
    </div>
    <div>
      <label for="materias">Materias:</label>
      <input type="text" id="materias" v-model="subject" />
      <button @click="handleSubject()">Agregar</button>
    </div>
    <div>
      <ul>
        <li v-for="(elm, index) in teacher.subjects" :key="index">{{ elm }}</li>
      </ul>
    </div>
    <div>
      <input type="checkbox" id="docs" v-model="teacher.doc" />
      <label for="docs">Documentación Entregada</label>
    </div>
    <div><button @click="handleAddTeacher()">Agregar</button></div>
  </section>

  <section>
    <h3>Listado de profesores</h3>
    <table>
      <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th>DNI</th>
        <th>Materias</th>
        <th>Documentación Entregada</th>
      </tr>
      <tr v-for="elm in teachers" :key="elm.dni">
        <td>{{ elm.teacherName }}</td>
        <td>{{ elm.surname }}</td>
        <td>{{ elm.dni }}</td>
        <td>
          <ul>
            <li v-for="(subject, index) in elm.subjects" :key="index">
              {{ subject }}
            </li>
          </ul>
        </td>
        <td v-if="elm.doc">Entregado</td>
        <td v-else>No Entregado</td>
      </tr>
    </table>
  </section>
</template>

<script lang="ts" setup>
  import { Ref, ref } from 'vue';

  interface ITeacher {
  	teacherName: string;
  	surname: string;
  	dni: string;
  	subjects: Array<string>;
  	doc: boolean;
  }

  let teacher: Ref<ITeacher> = ref({
  	teacherName: '',
  	surname: '',
  	dni: '',
  	subjects: [],
  	doc: false,
  });

  let teachers: Ref<Array<ITeacher>> = ref([]);

  let subject: Ref<string> = ref('');

  const handleSubject = () => {
  	teacher.value.subjects.push(subject.value);
  	subject.value = '';
  };

  const handleAddTeacher = () => {
  	teachers.value.push({
  		teacherName: teacher.value.teacherName,
  		surname: teacher.value.surname,
  		dni: teacher.value.dni,
  		subjects: teacher.value.subjects,
  		doc: teacher.value.doc,
  	});
  	teacher.value.teacherName = '';
  	teacher.value.surname = '';
  	teacher.value.dni = '';
  	teacher.value.subjects = [];
  	teacher.value.doc = false;
  };
</script>

<style scoped></style>

Lo importamos en el app.vue

<template>
  <TeacherForm />
</template>

<script lang="ts" setup>
  import TeacherForm from './components/TeacherForm.vue';
</script>

<style></style>