javascript - alpine.js - 循环按钮/点击多次触发

Question

我是 alpine.js 的新手并且有一个奇怪的行为。我究竟做错了什么？
按钮 Action “removePerson()”总是执行两次。我不知道为什么 ？

<template x-for="(person, i) in persons" :key="i">
  <div class="mt-3">
    <label>Name <span x-text="i"></span></label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Namen eingeben" x-model="person.name">
      <template x-if="i <= persons.length">
        <div class="input-group-append">
          <span class="input-group-text">
            <button type="button" @click.prevent="removePerson(i)" class="btn btn-primary">remove</button>
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

更详细:
https://codepen.io/derrobert/pen/Yzypzej

Answer 1

删除模板标签并将元素保留在其中

<template x-if="i <= persons.length">
</template>

实时查看您的代码
https://codepen.io/vkv88/pen/yLYVYYB?editors=1010