En el siguiente artículo te voy a mostrar cómo podemos construir un Select dinámico con Vue.js.
En los artículos anteriores te había enseñado como podíamos crear un Select dinámico en laravel utilizando la librería jQuery. Esta vez vamos a hacer lo mismo pero usando un framework de JavaScript llamado Vue.js, el cuál nos ofrece una serie de herramientas para desarrollar nuestro frontend de una manera más rápida y divertida.
Cabe resaltar que en éste tutorial se utilizó simplemente una instancia de Vue para gestionar la data y los métodos. No utilicé Componentes ya que no lo vi necesario, aunque también se puede hacer con dichos componentes, todo queda a tu elección. Si haces el código con componentes o diferente al mío, hazmelo saber 😉.
Realmente no pensé que este tutorial iba a resultar tan largo, por ende he dividido el mismo en dos partes. La primera parte consiste en hacer el método para cargar los datos mediante AJAX, y la segunda parte se muestra la lógica usada para que los datos seleccionados se mantengan en el Select cuando ocurre algún error dentro del formulario.
Aquí tienes el primer video:
Y aquí tienes el segundo video:
Esta ha sido una de tantas formas de cómo nosotros podemos crear un Select dinámico con Vue.js, espero que sea de gran utilidad y también espero tu feedback para conversar de que otras maneras se podría desarrollar.
Si te han gustado los videos puedes compartir el artículo para que me ayudes a difundir. Recuerda que puedes encontrar más videotutoriales en la sección del Blog de éste sitio. Nos leemos en el próximo post, Bye!
Como siempre una muy buena explicación, segui el ejercicio anterior utilizando Ajax y este con Vue.
Muchas gracias por compartir el conocimiento.
Muchas gracias por comentar, me alegra que te haya servido.