[Mise] Iterate through data with the `x-for` attribute in Alpine JS
Posted Answer1215
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Mise] Iterate through data with the `x-for` attribute in Alpine JS相关的知识,希望对你有一定的参考价值。
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的主要内容,如果未能解决你的问题,请参考以下文章
xml Mise en place de logback dans une application JAVA
[Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS
[Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS
[Mise] Update a count state value with the x-on event listener directive in Alpine JS