Estoy construyendo un componente genérico que se supone que recibe varios datos de back-end. Escribí un cambio. Una condición es:
case 'Bases': let bases = variant[tableName][colValue].map((base) => { return `<div class="base b${base.strongestIndication}">${base.name}</div>` }) return bases.join('')Uso v-html en mi plantilla, por lo tanto, en este caso, tenemos 3 divs creados, cada uno con una clase de "base" y luego "b1", "b2", "b3". Puedo ver en la página web que estas clases están configuradas correctamente cuando inspecciono los elementos.
He descrito en mi estilo algunas reglas para estas clases (principalmente color de fondo, radio de borde, etc.), pero no se aplican.
Supongo que esto podría tener algo que ver con el CSS que se aplica antes de que se creen estos divs, pero no estoy seguro de esto.
¿Qué debo hacer para que estas etiquetas creadas por JS tengan el estilo correcto?
(Además, sé que usar v-html puede ser peligroso, por lo tanto, si tiene una mejor idea para todo esto, soy todo oídos)
No hay necesidad de construir el marcado en métodos de componentes. Defínalo en la plantilla y vincule las clases dinámicamente. Como no publicó la estructura de datos de la API, ni cómo está usando este fragmento de código, solo puedo refactorizar el caso específico.
<div v-for="base in colValues" :class="['base', `b${base.strongestIndication}`]"> {{base.name}} </div>Lo averigué. Para aquellos que se preguntan, las declaraciones de cambio que devuelven código html no tienen estilo si la etiqueta en su archivo tiene alcance. No estoy seguro de por qué, pero eliminando el trabajo con alcance. Si decide hacerlo, pero nombres de clase únicos, ya que estos estilos se extenderán por toda la aplicación.