为什么这个循环使用 Alpine.js 重复多次?
Why is this loop using Alpine.js repeating multiple times?
我有一个使用 Alpine.js 的非常简单的 x-for 数组循环。我似乎无法弄清楚为什么它会重复多次。
<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>
感谢 Twitter 的提示,我能够确定这是由于在包含脚本时未使用“defer”关键字造成的。
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
我发现我包含了 AlpineJs 两次,一次在 <head>
,另一次在 </body>
之前
我有一个使用 Alpine.js 的非常简单的 x-for 数组循环。我似乎无法弄清楚为什么它会重复多次。
<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>
感谢 Twitter 的提示,我能够确定这是由于在包含脚本时未使用“defer”关键字造成的。
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
我发现我包含了 AlpineJs 两次,一次在 <head>
,另一次在 </body>