Formulario para agregar
Clase 11 de 21 • Curso Práctico de Vue.js
Contenido del curso
José Reinaldo Duque Serna
student•
hace 4 años
Josue Cerron Tuesta
student•
hace 3 años
Clase 11 de 21 • Curso Práctico de Vue.js
Contenido del curso
José Reinaldo Duque Serna
Josue Cerron Tuesta
Felix Torres Javier Antonio
Katherine Alondra Ruiz
Ana Shek
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!
Vengo del Futuro.
Agrega un color de fondo a tu formulario
form { font-size: 1.24rem; width: 100%; background: #fff; }
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>
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
Solo por esta vez , si es mas vuelta hacer el componente <formulario /> aparte