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

<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>

 <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>

Formulario para agregar

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?