Vue.js指令失效：动态表单输入循环逻辑异常问题排查

看起来你的问题主要出在删除功能的条件判断和可能的删除按钮显示逻辑上，我帮你一步步排查和修正：

1. 核心问题：删除后无法保证至少2个输入项 #

你的removeItem方法里的判断条件写错了，当前代码允许在输入项数量等于最小值（2）时执行删除，导致删除后只剩1个项，违反了“至少显示2个输入项”的要求：

removeItem: function(id) {
  if(this.items.length >= this.min){ 
    this.items.splice(id, 1); 
  }
}

修正方法： #

把判断条件改成this.items.length > this.min，只有当输入项数量超过最小值时才允许删除，确保删除后至少保留2个项：

removeItem: function(id) {
  if(this.items.length > this.min){ 
    this.items.splice(id, 1); 
  }
}

2. 删除按钮显示逻辑的调整（根据你的需求选择） #

你的需求是“当输入项数量≤2时不显示删除按钮”，当前代码的逻辑是仅第3个及以后的输入项（索引≥2）显示删除按钮，前两个固定不能删除。如果这符合你的预期，那逻辑没问题；但如果你希望只要输入项总数超过2，所有项都显示删除按钮，则需要修改按钮的显示条件：

情况A：仅允许删除新增的输入项（原需求逻辑） #

保持当前的按钮条件不变，确保前两个项无法删除：

<div class="col-auto" v-if="index >= min">
  <button type="button" @click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

情况B：输入项总数超过2时，所有项都显示删除按钮 #

把按钮的v-if条件改成判断输入项总数，结合修正后的删除方法，既能让所有项显示删除按钮，又能保证删除后不会少于2个：

<div class="col-auto" v-if="items.length > min">
  <button type="button" @click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

3. 验证初始化逻辑 #

你已经在data里初始化了2个空的输入项对象，这部分是正确的，页面加载时会默认显示2个输入项，符合“至少2个”的要求：

items:[
  { from: '', to: '', date: '' },
  {from: '', to: '', date: ''}
]

最终测试 #

修改后可以测试以下场景验证效果：

• 页面加载时显示2个输入项，无删除按钮
• 点击添加按钮新增第3个输入项，此时会显示删除按钮（根据你选择的显示逻辑）
• 点击删除按钮，输入项数量回到2，删除按钮消失
• 尝试删除第2个输入项（如果选情况B），会发现无法执行删除，确保至少保留2个项

内容的提问来源于stack exchange，提问作者Zay Yar Min