Why is this loop using Alpine.js repeating multiple times?

Question

I have a very simple x-for array loop using Alpine.js. I can’t seem to figure out why it is repeating multiple times.

<ul x-data="{ skills: ['AWS', 'Terraform', 'PHP', 'Node.js', 'Vue.js', 'Golang', 'Laravel', 'Hugo', 'Docker', 'MySQL', 'Redis', 'Elasticsearch', 'API Design', 'HTML5', 'CSS3', 'Tailwind CSS', 'EC2', 'Lambda', 'RDS', 'ECS', 'S3', 'API Gateway', 'DynamoDB', 'Cloudfront', 'Cloudwatch', 'SQS'] }">
  <template x-for="skill in skills" :key="skill">
    <li x-text="skill" class="inline-block text-xs bg-gray-200 text-gray-700 rounded-full py-1 px-3 mr-2 mb-2"></li>
  </template>
</ul>

https://jsfiddle.net/y9wbz3dg/1/

ATLChris · Accepted Answer · 2021-07-16 00:58:43Z

4

Thanks to a tip from Twitter I was able to determine that this is caused by not using the "defer" keyword when including the script.

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

answered Jul 16, 2021 at 0:58

ATLChris

3,2868 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adham shafik · Accepted Answer · 2022-03-06 21:32:16Z

0

I found that i was including AlpineJs twice, once at <head> and another before </body>

answered Mar 6, 2022 at 21:32

Adham shafik

1,0441 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Why is this loop using Alpine.js repeating multiple times?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related