[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的主要内容,如果未能解决你的问题,请参考以下文章

如何在Ruby中遍历数组

text :Mise a jours de npm.txt

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