Javascript 从阵列填充时，选项卡显示不正确

我正在尝试创建一些选项卡，如中所示。我可以显示硬编码的选项卡没有问题，但是当我尝试从列表填充选项卡时，它们显示不正确

代码和下面的图片

tabsv2.html

<template>

    <!--Not Working-->
    <ul class="tab" repeat.for="name of collection">
        <li><a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a></li>
    </ul>

    <div repeat.for="name of collection">
        <div id="${name}" class="tabcontent">
            <h3>${name}</h3>
            <p>${name} is a capital city. </p>
        </div>
    </div>


    </br></br>

    <!--Working-->
    <ul class="tab">
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'London1')">London</a></li>
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'Paris1')">Paris</a></li>
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'Tokyo1')">Tokyo</a></li>
    </ul>

    <div id="London1" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>

    <div id="Paris1" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p> 
    </div>

    <div id="Tokyo1" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>
</template>

选项卡水平显示正确，但单击时仍不展开：

---

我的代码中有一个错误：

<a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a>

应该是：

<a href="#" class="tablinks" click.delegate="openTab($event, name)">${name}</a>

---

我的代码中有一个错误：

<a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a>

应该是：

<a href="#" class="tablinks" click.delegate="openTab($event, name)">${name}</a>

您已将

重复。for

放在

中。我想你应该把它放在

哦，你说得对。它们现在显示正确，但仍不可单击。我将立即更新帖子您不应该使用父div来使用

repeat.for

。您应该这样做：

@FabioLuz感谢您的建议。我已更改代码，但它们仍然不起作用。您已将

重复。for

放在

中。我想你应该把它放在

哦，你说得对。它们现在显示正确，但仍不可单击。我将立即更新帖子您不应该使用父div来使用

repeat.for

。您应该这样做：

@FabioLuz感谢您的建议。我已经更改了代码，但它们仍然不起作用