Vue实现：前一个输入框填值后自动新增动态表单输入框

我来帮你把动态表单创建和输入监听结合起来，完美实现你的需求！核心思路就是给每个输入框绑定输入事件，当用户在最后一个输入框中输入内容时，自动触发新增输入框的逻辑，避免重复添加。

下面是完整的可运行代码示例：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="form">
  <div v-for="(item, index) in items" :key="index">
    <input 
      type="text" 
      v-model="item.value" 
      @input="handleInput(index)" 
      placeholder="输入内容后自动添加新框"
    >
  </div>
</div>

<script>
new Vue({
  el: '#form',
  data: {
    items: [{ value: '' }] // 初始化第一个空输入框，让用户能直接开始输入
  },
  methods: {
    addItem() {
      this.items.push({ value: '' });
    },
    handleInput(index) {
      // 关键判断：只有当前是最后一个输入框，且内容不为空（排除纯空格）时，才新增
      if (index === this.items.length - 1 && this.items[index].value.trim() !== '') {
        this.addItem();
      }
    }
  }
})
</script>

关键逻辑拆解： #

• 模板渲染：用v-for循环遍历items数组，每个数组项对应一个输入框，通过v-model双向绑定输入值，确保数据和视图同步。
• 输入监听：给每个输入框绑定@input事件，用户每输入一个字符就会触发handleInput函数。
• 新增判断：在handleInput里做两个检查：
  1. 当前输入的是不是最后一个输入框（避免用户在中间的输入框输入时也新增）
  2. 输入的内容不为空（用trim()过滤掉纯空格的情况）
• 初始化处理：在data里给items初始化一个空对象，这样页面加载完成后就有第一个输入框，用户不需要手动点击添加按钮。

可选优化（按需添加）： #

如果想要用户删除最后一个输入框的内容时，自动移除新增的空输入框，可以给handleInput加一段逻辑：

handleInput(index) {
  // 新增逻辑
  if (index === this.items.length - 1 && this.items[index].value.trim() !== '') {
    this.addItem();
  }
  // 移除空输入框逻辑（仅当不是最后一个输入框时）
  if (index !== this.items.length - 1 && this.items[index].value.trim() === '') {
    this.items.splice(index, 1);
  }
}

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