In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.
We then iterate through an Array of Objects with the x-for directive in Alpine JS. We use a <template> tag to wrap the HTML element we want to repeat for each item, and put the x-for directive on that template tag.
We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.
<div x-data="tabs()"> <div> <template x-for="tab in tabs" :key="tab.id"> <button @click="activeTab = tab.id" x-text="tab.title" :class="{‘active‘: getActiveStatus(tab.id)}"></button> </template> </div> <div> <template x-for="tab in tabs" :key="tab.id"> <div x-show="getActiveStatus(tab.id)"> <p x-text="tab.text"></p> </div> </template> </div> </div> <script> function tabs() { return { activeTab: 0, tabs: [ {id: 0, title: "Tab 1", text: "I am the content of tab number one, and I think I just won! ??"}, {id: 1, title: "Tab 2", text: "Heya! I root for number two, and so should you! ??"}, {id: 2, title: "Tab 3", text: "Haha nice one, but I am number three, and now it‘s all about me! ??"}, ], getActiveStatus(id) { return this.activeTab === id } } } </script>
[Mise] Iterate through data with the `x-for` attribute in Alpine JS
原文：https://www.cnblogs.com/Answer1215/p/12890640.html