使用Alpine JS实现DOM元素增删时点击删除按钮总移除最后一项问题求解

问题根源 #

核心问题是x-for使用了数组索引index作为:key值。
当你删除数组中间的某一项时，数组后续所有元素的索引都会整体向前挪一位，而Alpine依靠:key判断哪些DOM需要保留、哪些需要移除，用index当key的话，Alpine会误判最后一个key对应的元素是被删除的，就会出现总是移除最后一项、输入框内容错位的问题。

修复方案 #

1. 修改JS逻辑，给每个字段加唯一标识 #

给每个新增的field项生成唯一ID作为key的取值，简单场景下用时间戳+随机数即可保证不重复：

return {
  fields: [],
  addNewField() {
    // 每个新增项自带唯一id
    this.fields.push({
      id: Date.now() + Math.random()
    });
  },
  removeField(index) {
    this.fields.splice(index, 1);
  }
}

2. 修改HTML的x-for配置 #

把:key的取值从index替换为每个元素自带的唯一ID：

<div x-data="addRemove()">
  <!-- 此处key改为每个元素的唯一id -->
  <template x-for="(field, index) in fields" :key="field.id">
    <div>
      <input type="text" name="txt1[]" class="form-input">
      <button type="button" class="btn btn-danger btn-small" @click="removeField(index)">&times;</button>
    </div>
  </template>
  <button type="button" @click="addNewField()">+ Add Row</button>
</div>

内容的提问来源于stack exchange，提问作者Kingsley Uchenna