Formulario para agregar

Clase 11 de 21 • Curso Práctico de Vue.js

José Reinaldo Duque Serna

student•

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>

Josue Cerron Tuesta

student•

Heroe si capa!

Felix Torres Javier Antonio

student•

Vengo del Futuro.

Agrega un color de fondo a tu formulario

form {
  font-size: 1.24rem;
  width: 100%;
  background: #fff;
}

Katherine Alondra Ruiz

student•

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>

Ana Shek

student•

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

Juan Guillermo Perez Cardozo

student•

Solo por esta vez , si es mas vuelta hacer el componente <formulario /> aparte