0

Hola buenas noches con todos quiero cargar datos dentro de un select que está hecho con materializecss, estoy probando vuejs haciendo uso de componentes, los datos los traigo gracias a axios. Este es el código en mi archivo js.

const app = Vue.createApp({});
app.component('principal-pagina', {
template:
    `<div class="container input-field" style="margin-top:3rem">
    <select>
    <option value="" selected="selected">Choose your option</option>
    <option :value="mesa.codigo" v-for="mesa in mesas" :key="mesa.codigo">{{ mesa.numero }}</option>
    </select>
    <label>Materialize Select</label>
   </div>`,
   data() {
    return {
        mesas: []
    }
   },
   created() {
    axios.post('../controller/MesasController.php?accion=listar')
        .then(res => {
            this.mesas = res.data;
        })
        .catch(error => {
            console.log(error);
        });
     }
  });
  app.mount('#aplicacion');


document.addEventListener('DOMContentLoaded', function () {
   var select = document.querySelectorAll('select');
   var instances = M.FormSelect.init(select);
  });

Los datos si llegan y al inspeccionar elementos veo que si me aparecen dentro de la etiqueta select pero no se visualizan. Espero me entiendan con las imágenes siguientes.

imagen1 Acá se muestra el select

imagen2 Seleccionamos alguna opción pero no se muestran los datos traídos de la bd, sólo está el que dejé para comprobar

imagen3
En el inspector de elementos marqué de rojo los datos traídos de la bd que si aparecen dentro de la etiqueta select pero no en la página como se muestra en la segunda imágen.

Cómo podría solucionar esto? tendría que llegar hasta la lista para cargar ahí los datos? porque según lo de la imagen3 tendría que agregar los datos dentro de la lista para que se puedan visualizar en la página

Bueno en el html solo tengo esto:

<div id="aplicacion">
    <principal-pagina></principal-pagina>
</div>

Gracias y espero me hayan entendido.

3
  • Lo primero, si estás trayendo datos de un backend o api, ¿por qué usas POST en vez de GET? Lo segundo, parece que la vista se carga previo a que el componente haya obtenido los datos, por lo que seguramente, tu problema es tema de asincronía. Prueba añadiendo delante del created async y, delante del axios.post await; para indicar al código que hasta que no se complete eso, no continúe con la transpilación de código. Commented el 5 feb. 2021 a las 7:30
  • Hola gracias por responde hice lo que me recomendaste pero nada, si me trae los datos pero no se visualizan en la página, pasa lo mismo que en las imágenes que comparti Commented el 5 feb. 2021 a las 17:10
  • ¿Puedes subir una edición con la corrección? Commented el 6 feb. 2021 a las 18:29

2 respuestas 2

0

Hola buen día a todos coloco la solución al inconveniente presentado para que pueda servirle de ayuda a alguien en un futuro. Lo que hice fue agregar el hook llamado updated que leí del ciclo de vida de una instancia en vuejs y colocar dentro el código javascript que inicializa el select de materializecss, así de la sgte. manera:

data() {
    return {
        mesas: []
    }
},
async created() {
    let res = await axios.post('../controller/MesasController.php?accion=listar');
    this.mesas = res.data;
},
updated() {
    var select = document.querySelectorAll('select');
    var instances = M.FormSelect.init(select);
}

Y el resultado fue el sgte: solución imagen

Los datos ya se visualizan al presionar el select. Por lo que entendí el hook updated se invoca después de que el template del componente se vuelve a actualizar debido a un cambio de datos y como el valor de la propiedad mesas en la función data va a cambiar, definitivamente va a ver un cambio en el template, entonces luego de este cambio tendría que invocarse el hook updated con el código que inicializa al select de materializecss con los datos ya cargados y no en el evento DOMContentLoaded como lo estaba haciendo antes ya que este evento se ejecuta antes de la petición http con axios, hice unas pruebas con un console log para ver en que orden se ejecutan los hooks, el evento load y la petición por axios:

imagen prueba

No sé si estoy en lo correcto y si me expliqué bien, sólo espero que se haya entendido, si hay una mejor manera de hacerlo agradecería compartirlo por favor. Agradezco también al amigo Sergio por darme una idea de como solucionar el inconveniente.

0

En mi caso yo llamo a material así: import M from "materialize-css";

y aplicando lo que se muestra arriba updated() { M.AutoInit(); }

y me funcionó perfectamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.