Formulario para agregar
Contenido del curso
Formulario para agregar
Contenido del curso
José Reinaldo Duque Serna
Josue Cerron Tuesta
Katherine Alondra Ruiz
Felix Torres Javier Antonio
Ana Shek
Ruben Eduardo Acosta
Juan Guillermo Perez Cardozo
Có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
