Me gustaría crear un enlace dinámico :class o :style que use datos almacenados en una variable Alpine.js.
<div x-data="{ divClass: 'inner', color: 'red' }"> <div :class="${divClass}" :style="background-color: ${color}"></div> </div> En el ejemplo anterior, me gustaría que la variable divClass una clase dinámica inner y el color para generar un estilo dinámico red . ¿Es posible?
A partir de agosto de 2021, no es posible hacerlo directamente. Sin embargo, hay dos posibles soluciones (mencionadas en este número , en el repositorio Alpine.js).
Hay un truco simple que puede usar para lograr lo que desea, simplemente necesita envolver los valores de los atributos en acentos graves :
<div x-data="{ divClass: 'inner', color: 'red' }"> <div :class="`${divClass}`" :style="`background-color: ${color}`"></div> </div>Hay dos bibliotecas que ayudan a envolver clases/estilos dinámicos en un código atractivo. Son nombres de clase y nombres de estilo. Con ellos a bordo, el código podría verse así:
<div x-data="{ divClass: 'inner', color: 'red' }"> <div :class="classNames( divClass )" :style="styleNames({ backgroundColor: color })"></div> </div>En mi opinión, la primera solución es mejor ya que ahorra valiosos kB al no agregar dependencias adicionales. Sin embargo, debe tener en cuenta que es un poco menos legible y potencialmente confuso para otros desarrolladores.