Quiero centrar mi elemento td cuando el texto es igual a "-". Si el texto es igual a otra cosa, quiero que se alinee a la izquierda.
¿Cómo puedo hacer eso?
<td x-bind:style="$el.textContent == '-' ? { 'text-align': 'left' } : { 'text-align': 'center' }" x-text="format(variable)"></td> Sí, podría simplemente reemplazar $el.textContent por format(variable) , pero me gustaría no llamar a format(variable) dos veces.
Puede usar la variable en sí misma en el enlace de estilo:
<td x-bind:style="variable !== '' ? { 'text-align': 'left' } : { 'text-align': 'center' }" x-text="format(variable)"></td>De esta manera, el enlace de estilo también es reactivo.
Si realmente quiere evitar el uso de variable en el enlace de estilo, puede combinar x-init con la magia $nextTick para esperar hasta que Alpine.js termine de actualizar el DOM, para que pueda capturar el contenido real de la celda y actualizar el estilo de la celda. si es solo un guion. Sin embargo, este método no es reactivo.
<td x-init="$nextTick(() => {if ($el.textContent == '-') {$el.style['text-align'] = 'center'}})" x-text="format(variable)"> </td>