How to set attribute value of HTML tag by an array in Alpine Js

Question

I am new in alpine js, I am trying to fill five star like rating(2.3 out of 5 means 2 star full fill and 3rd one filled by 30%, rest should be empty) while I set offset value like in the given below code then it fills all star by 1st value of percentage:['60', '0%', '0%', '0%', '0%'] while it should fill 1st star 60% rest by 0% but it fills all as 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>

"how to set offset value in Alpine js" what do you mean by offset? — ruleboy21
– ruleboy21, Commented Jun 14, 2022 at 9:59

Dauros · Accepted Answer · 2022-06-14 10:36:02Z

You need to use x-bind directive at offset attribute to set it dynamically. Inside an Alpine.js directive we can use regular JS code, so we can append the percent sign after the percent value using template literals. Furthermore, we need to generate a unique id for each linearGradient definition, otherwise the first would be applied to each of the SVG element.

<script src="https://unpkg.com/[email protected]/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>

Note: remove the style="height: 20px; width: 20px;", I added it only for SO code snippet.

Collectives™ on Stack Overflow

How to set attribute value of HTML tag by an array in Alpine Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related