Soy nuevo en alpine js, estoy tratando de llenar una calificación de cinco estrellas (2.3 de 5 significa que 2 estrellas se llenan por completo y la tercera se llena en un 30%, el resto debe estar vacío) mientras configuro el valor de compensación como en el siguiente código luego llena todas las estrellas por el primer valor de porcentaje: ['60', '0%', '0%', '0%', '0%'] mientras que debería llenar la primera estrella 60% resto por 0% pero llena todo como 60%:
<template x-for="(offset, index) in percentage" :key="index"> <svg class="h-6 w-6 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <defs> <linearGradient id="grad"> <stop x-bind:offset="offset" :key="index" stop-color="yellow"/> <stop offset="0%" stop-color="gray"/> </linearGradient> </defs> <path fill="url(#grad)" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/> </svg> </template>Debe usar la directiva x-bind en el atributo de offset para configurarlo dinámicamente. Dentro de una directiva Alpine.js, podemos usar código JS regular, por lo que podemos agregar el signo de porcentaje después del valor de porcentaje usando literales de plantilla. Además, necesitamos generar una id única para cada definición de linearGradient , de lo contrario, la primera se aplicaría a cada uno de los elementos SVG.
<script src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> <div x-data="{percentage: [20, 40, 60, 80, 100]}"> <template x-for="element in percentage"> <svg style="height: 20px; width: 20px;" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <defs> <linearGradient :id="`grad-${element}`"> <stop :offset="`${element}%`" stop-color="yellow" /> <stop offset="0%" stop-color="gray" /> </linearGradient> </defs> <path :fill="`url(#grad-${element})`" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> </svg> </template> </div> Nota: elimine el style="height: 20px; width: 20px;" , lo agregué solo para el fragmento de código SO.