¡Esta es la primera vez que publico en stackoverflow!
Actualmente estoy en el proceso de construir una especie de aplicación web de redes sociales. Acabo de empezar en la página de notificaciones de la aplicación web. Mi problema es que las diferentes notificaciones tienen diferentes plantillas. Entonces, si bien algunas notificaciones pueden incluir una imagen, otras no. Tuve éxito al mostrar una fuente al recorrer una matriz JSON con la identificación como clave, pero no creo que pueda hacerlo con el panel de notificaciones. Cada notificación tiene su ID separada, por lo que recorrerlas no es el problema. Mi principal problema es que cada notificación tiene su propio atributo de tipo, y quiero mostrar diferentes plantillas div según el tipo, mientras recorro el JSON usando la ID.
Para aclarar, estoy usando quasar cli para vue.js.
Adjuntaré mi código para el bucle a continuación para un poco de contexto.
Cualquier ayuda sería apreciada. Intenté buscar este problema y no encontré nada, aunque tal vez sea un problema porque no sé cómo buscar correctamente.
<q-card class = "no-padding" style = "height: 150px;" v-for = "event in joinedEvents" :key = "event.id" flat>Básicamente, quiero poder mostrar una imagen si el tipo de notificación es 1 o mostrar un botón si es 2.
¡Gracias por adelantado!
Puede hacer uso de la función de componente dinámico de vue js, definir sus plantillas de notificación y luego, según el identificador, establecerlas dinámicamente. Al usar este método, puede usar un modelo único para tantas plantillas como desee.
La estructura de la plantilla será así
En vue solo el componente del modelo hace uso de
<component :is="myDynamicComponent" :data="myDyanmicDataForComponent" />
Cada vez que reciba una notificación, simplemente configure la plantilla y los datos y luego hágalos visibles.
Aquí hay un ejemplo de trabajo: