Vuejs para programadores jQuery. Select simple VIII

Vuejs para programadores jQuery

Select simple VIII

Iremos viendo a través de varios post variantes alrededor del elemento HTML Select.

El primer código que tocaremos es un Select básico, sin mucha magia que sencillamente muestra un resultado según la opción elegida.

JQUERY

Enlaces:

• Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/jQuerySelectSimple.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/jQuerySelectSimple.html

<form>

<div class="form-row align-items-center">

<div class="col-auto my-1">

<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preferencia</label>

<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">

<option selected value="0">Elija...</option>

<option value="1">Haz el amor y no la guerra</option>

<option value="2">Cada día sabemos más y entendemos menos</option>

<option value="3">El mundo es bello, pero tiene un defecto llamado hombre</option>

</select>

</div>

</div>

</form>

<div>

<span id="selectContent"></span>

</div>

No hay nada nuevo aquí, es un Select normal con 4 opciones pero se ha puesto el código para tomar en cuenta ciertas observaciones, por ejemplo el id del Select y los value de las opciones (números continuados como caracteres) y el espacio con id selectContent que será donde mostraremos el mensaje relacionado.

Pasemos al código JS:

<script>

const opciones = ['Nada elegido', 'Frase atribuida a John Lennon', 'Frase atribuida a Albert Einstein', 'Frase atribuida a Friedrich Nietzsche']

const origen = jQuery('#inlineFormCustomSelect')

const objetivo = jQuery('#selectContent')

origen.on('change', actualizar)

actualizar()

function actualizar() {

objetivo.empty().append(opciones[parseInt(jQuery('#inlineFormCustomSelect option:selected').val())])

}

</script>

Lo primero que hacemos es crear un array (opciones) con los mensajes relacionados con los options del Select. La única condición es que el array debe tener tantos elementos como options existan en el HTML.

Seguidamente creamos una constante llamada origen que apunta al Select y una constante llamada objetivo que apunta al id donde mostraremos el mensaje.

Luego asociamos la función actualizar al evento change del Select y por último lanzamos actualizar por primera vez.

Revisemos la función actualizar:

objetivo.empty().append(opciones[parseInt(jQuery('#inlineFormCustomSelect option:selected').val())])

Desmontemos la línea:

jQuery('#inlineFormCustomSelect option:selected').val()

Nos devolverá el value del option elegido. Recordemos que el value es de 0 a 3

parseInt(jQuery('#inlineFormCustomSelect option:selected').val())

El problema del value es que es un valor string así que usamos parseInt para convertirlo a un valor integer

opciones[parseInt(jQuery('#inlineFormCustomSelect option:selected').val())]

Ese valor entero lo usamos para iterar en el array en la posición que coincida con el value del option elegido. Recordemos que opciones es la primer constante que definimos

objetivo.empty()

Vaciamos el contenido del span donde vamos a poner el mensaje

objetivo.empty().append()

append agrega luego que hemos limpiado el span.

objetivo.empty().append(opciones[parseInt(jQuery('#inlineFormCustomSelect option:selected').val())])

Así que lo que hacemos es: limpiar el span y agregar el mensaje que está en el array en la posición correspondiente al option elegido.

VUEJS

Enlaces:

• Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/VueJsSelectSimple.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/VueJsSelectSimple.html

HTML:

<form>

<div class="form-row align-items-center">

<div class="col-auto my-1">

<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preferencia</label>

<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" v-model="origen">

<option selected value="0">Elija...</option>

<option value="1">Haz el amor y no la guerra</option>

<option value="2">Cada día sabemos más y entendemos menos</option>

<option value="3">El mundo es bello, pero tiene un defecto llamado hombre</option>

</select>

</div>

</div>

</form>

<div>

<span>

{{opciones[parseInt(origen)]}}

</span>

</div>

Ya hemos visto tanto HTML en Vuejs que pocas sorpresas tendremos aquí. La más destacada es otra vez v-model. Ya lo hemos usado con valores string y valores boolean pero siempre actuaban sobre el elemento de forma directa. Sin embargo en este caso v-model usado en el Select guardara en la variable origen el value del option elegido y se actualizara con cada cambio del Select sin necesidad de hacer nada más.

En el span mostramos ({{}}) el array (es una suposición porque no hemos visto el JS aun) cuya posición es el valor entero (parseInt) del value del option elegido (origen)

El código JS es sencillo:

<script>

new Vue({

el: '#app',

data: {

origen: '0',

opciones: ['Nada elegido', 'Frase atribuida a John Lennon', 'Frase atribuida a Albert Einstein', 'Frase atribuida a Friedrich Nietzsche']

}

})

</script>

Solamente es necesario definir las dos variables que usaremos: origen con un valor inicial '0' (string) y el array (ahora si sabemos seguros que es un array) con los mensajes relacionados. Las condiciones son las mismas que para jQuery. Y de hecho es el mismo contenido.

Listo. Esto lo tenemos.

Enlaces del Index:

• Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/indexSelectSimple.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Select/Simple/indexSelectSimple.html

Consultas, dudas, comentarios: Slack de PEUM o en Twitter.