Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de formulario de Vuejs

 


Veamos cómo trabajar con formularios html cuando se usa Vue mediante un ejemplo de formulario vuejsEste tutorial cubrirá varios temas y también incluirá una demostración en vivo que puede probar usted mismo. En los formularios, hay muchos tipos de entrada con los que lidiar y cubriremos la mayoría de ellos aquí. Veremos cómo obtener valores de los campos de entrada y cómo trabajar con esos datos. Además, veremos cómo trabajar con controles de formulario, como un campo de correo electrónico, campo de contraseña, campo de selección, casillas de verificación, botones de radio, así como un control de formulario personalizado que podemos construir como un componente dedicado de Vue.


Enlace de entrada de texto con modelo v

Podemos comenzar con un campo de entrada de texto básico, donde aceptamos la dirección de correo electrónico de un usuario. Esto es bastante fácil, lo hemos visto muchas veces. Tenemos una etiqueta <input> que tiene resaltado el marcado específico de vue.

En la sección <script> configuramos el método data () para asociar los datos con la IU. El método data () devuelve un objeto como lo conocemos, pero también estamos configurando un userDataobjeto anidado para mantener la emailpropiedad. Esto se debe a que agregaremos más propiedades en el formulario y el userDataobjeto funciona como un bonito espacio de nombres.


Enlace de entrada de contraseña y v-model.lazy

Ahora podemos agregar una entrada de texto que se vincula a una contraseña. Este ejemplo funcionará casi exactamente como el fragmento de arriba. Sin embargo, existe una diferencia. Estamos agregando el .lazymodificador al v-modelLo que hace esto es sincronizar los datos de entrada con el objeto de datos * después * de un evento de cambio, como mover el foco a un campo diferente. Esto puede ser útil en un formulario cuando no desea aplicar ninguna validación hasta que un usuario presione el botón de envío y todo esté completo.

Podemos agregar esta nueva passwordpropiedad al userDataobjeto en nuestro método data ().


Número Typecast con v-model.number

Este formulario es un tipo de formulario de revisión y el usuario puede incluir una revisión numérica del 1 al 10. Para este tipo de enlace de datos, podemos hacer uso de v-model.lazy. Esto es útil porque incluso cuando usa type = ”number” en el formulario, el valor de los elementos de entrada HTML siempre devuelve una cadena.

Necesitaremos agregar esta propiedad de datos también en nuestro <script>.


Trabajar con Textarea

Ahora también podemos agregar un área de texto al formulario donde un usuario puede agregar algunas oraciones como parte de su revisión. Tenga en cuenta que debe utilizar v-model para vincular datos al área de texto. Si intenta utilizar la interpolación entre <textarea> y </textarea>, no funcionará.

Agreguemos también la propiedad del mensaje a nuestra área de datos ().


Casillas de verificación Usar una matriz

Ahora pasaremos a usar casillas de verificación que son un poco diferentes porque puede tener múltiples valores verdaderos en una colección de casillas de verificación en un formulario. Aquí hay dos casillas de verificación que forman parte del mismo formulario. Esto significa que un usuario puede seleccionar ambos al mismo tiempo si lo desea. Tenga en cuenta que ambas entradas tienen el mismo enlace v-model = ”checkboxOptions”. En el caso de que el usuario desee el especial del día y los cupones mensuales, deberá marcar ambas casillas de verificación.

Manejamos esto en el área de script haciendo uso de una matriz simple como la que vemos aquí.


Los botones de opción son de valor único

Los botones de opción tienen un aspecto similar a las casillas de verificación, pero la diferencia es que una colección de botones de opción solo permite seleccionar una opción. Queremos saber si nuestro usuario es hombre o mujer, podemos agregar este marcado aquí. Ambas entradas comparten el mismo enlace v-model = ”radioBoxOption”, pero solo se usará una en los datos ().

Dado que la propiedad radioBoxOption solo admite un valor, podemos configurarlo como tal y rellenar previamente el valor con 'Male'.


Seleccionar entradas

El formulario puede incluir un menú desplegable de selección para permitir que un usuario elija el nivel de prioridad de esta revisión. Dado que una entrada <select> tiene muchas etiquetas <option> anidadas, podemos hacer uso de v-for para representarlas todas.

En el área de datos (), necesitaremos propiedades para esto. Uno para prioritiesy uno para selectedPriorityTenga en cuenta que prioritieses una matriz de valores, y así es como la v-for en la plantilla puede representar muchos valores de <option>.


modelo v para controles personalizados

Puede agregar un control personalizado a un formulario creando uno como un componente separado si lo desea. Construyamos un componente donde un usuario puede seleccionar verdadero o falso, similar a cómo podrían funcionar dos botones de radio. Podemos crear este componente en un archivo separado de Switch.vue.

Switch.vue

Ahora necesitamos importar esto en App.vue y registrarlo como un componente.

Con esto ahora configurado, podemos representar este interruptor en nuestra forma de esta manera.


Presentar y prevenir

Entonces, ¿qué vamos a hacer con estos datos de formulario? Bueno, para nuestros propósitos, solo vamos a agregar una forma de mostrar los datos ingresados ​​al usuario. Por defecto, el formulario intentará enviarse a un servidor, pero realmente no queremos hacer eso. Para evitar que eso suceda, simplemente podemos usar el modificador .prevent como se ve aquí.

Aquí está el marcado final para el área <script>. El botón está activando un submitted()método ahora. Todo lo que hace ese método es establecer el valor de la isSubmittedpropiedad en true.

Usaremos esta isSubmittedpropiedad de datos para decidir si mostrar o no los datos al usuario mediante un v-if.


¡Pruébalo!

Siga adelante y tome la forma que construimos para una prueba de manejo.


Resumen de ejemplo de formulario de Vuejs

Aprendimos mucho sobre formularios y VueJs en este tutorial. Cubrimos cómo usar todos los controles de formulario HTML estándar además de crear nuestro propio control personalizado como un componente de Vue. Durante el transcurso de esto, vimos cómo usar v-model para nuestro enlace de datos, y algunos casos especiales en los que podríamos necesitar hacer uso de un modificador como lazy o number. Finalmente, proporcionamos una buena demostración donde puede probar los enlaces de datos por su cuenta.



Publicar un comentario

0 Comentarios