如何通过Alpine Js中的数组设置HTML标签的属性值

Question

我是 alpine js 的新手，我正在尝试填充五颗星（满分 5 分中的 2.3 表示 2 星完全填充，第 3 颗填充 30%，其余部分应该为空），同时我设置偏移值，如下面的代码所示然后它用第一个百分比值填充所有星星：['60', '0%', '0%', '0%', '0%'] 虽然它应该填充 1st star 60% rest by 0% 但它全部填充为 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>

Answer 1

您需要在offset属性处使用x-bind指令来动态设置它。 在 Alpine.js 指令中，我们可以使用常规的 JS 代码，因此我们可以使用模板文字在百分比值之后附加百分号。 此外，我们需要为每个linearGradient定义生成一个唯一的id ，否则第一个将应用于每个 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>

注意：去掉style="height: 20px; width: 20px;" ，我只为 SO 代码片段添加了它。