Formulario para agregar
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Formulario para agregar
Contenido del curso
Formulario para agregar
José Reinaldo Duque Serna
Estudiante
Josue Cerron Tuesta
Estudiante
Katherine Alondra Ruiz
Estudiante
Felix Torres Javier Antonio
Estudiante
Ana Shek
Estudiante
Ruben Eduardo Acosta
Estudiante
Juan Guillermo Perez Cardozo
EstudianteCódigo del formulario
<form @submit.prevent="submit"> <div class="field"> <label>Título</label> <input type="text" v-model="title" /> </div> <div class="field"> <label>Monto</label> <input type="number" v-model="amount" /> </div> <div class="field"> <label>Descripción</label> <textarea rows="4" v-model="description"></textarea> </div> <div class="field"> <label class="radio-label"> <input type="radio" v-model="movementType" value="Ingreso" /> <span>Ingreso</span> </label> <label class="radio-label"> <input type="radio" v-model="movementType" value="Gasto" /> <span>Gasto</span> </label> </div> <div class="action"> <button>Agregar movimiento</button> </div> </form>
Heroe si capa!
En lugar de declarar la variable una a una con su ref, lo encapsule en un objecto y ese lo dejé reactivo.
const movement = ref({ title: "", amount: 0, description: "", type: "Ingreso", });
ya dentro del form accedo asi:
<div class="field"> <label for="">Título</label> <input type="text" v-model="movement.title" /> </div> <div class="field"> <label for="">Monto</label> <input type="number" v-model="movement.amount" /> </div>
Vengo del Futuro.
Agrega un color de fondo a tu formulario
form { font-size: 1.24rem; width: 100%; background: #fff; }
Dentro del Vue.js, los radio button nos permite seleccionar opciones múltiples. Agregando en el script:
const movementType = ref("Ingreso");
Podamos hacer que el usuario solo pueda marcar solamente una opción en los radio button
Esto no es verdad. LA profesora se equivoco, solo le falto poner el atributo name en los input radio para que solo permita elegir uno:
Solo por esta vez , si es mas vuelta hacer el componente <formulario /> aparte