如何实现点击Add row按钮时为HTML表单动态添加行？

嘿，我来帮你搞定这个动态添加表单行的需求！看你现在的代码用了Vue的v-model，但目前只绑定了单个变量，要实现多行输入得调整下数据结构和模板写法，具体步骤如下：

1. 调整Vue的数据结构 #

首先，把原来单独的act和section变量改成一个数组，用来存储每一行的表单数据。数组里的每个元素是一个包含act和section属性的对象，初始可以先放一个空对象，保证页面加载时就有一行表单：

export default {
  data() {
    return {
      rows: [
        { act: '', section: '' } // 初始默认行
      ]
    }
  },
  methods: {
    addRow() {
      // 点击按钮时往数组里添加新的空行对象
      this.rows.push({ act: '', section: '' })
    }
  }
}

2. 修改HTML模板，用v-for循环渲染行 #

接下来把原来的单个表单行改成用v-for遍历rows数组，这样数组里有多少个对象，页面就会渲染多少行表单。同时把v-model绑定到当前行对象的属性上，确保每一行的输入都是独立的：

<!-- 用v-for循环生成每一行，注意添加唯一的key -->
<div class="row" v-for="(row, index) in rows" :key="index">
  <div class="col-md-4">
    <div class="form-group label-floating">
      <label class="control-label">Act</label>
      <input type="text" class="form-control" v-model="row.act">
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group label-floating">
      <label class="control-label">Section</label>
      <input type="text" class="form-control" v-model="row.section">
    </div>
  </div>
  <!-- 可选：添加删除行按钮，提升用户体验 -->
  <div class="col-md-4 mt-4">
    <button @click="removeRow(index)" class="btn btn-danger">Remove</button>
  </div>
</div>

<!-- 绑定添加行的点击事件 -->
<button @click="addRow" class="btn btn-primary mt-3">Add row</button>

3. 可选：添加删除行功能 #

如果需要支持删除行，只需要在methods里加一个删除方法，通过数组的splice方法移除对应索引的元素：

methods: {
  addRow() {
    this.rows.push({ act: '', section: '' })
  },
  removeRow(index) {
    // 可以加个判断，确保至少保留一行表单
    if (this.rows.length > 1) {
      this.rows.splice(index, 1)
    }
  }
}

关键要点说明 #

• 用数组存储多行数据是核心：每一行对应一个对象，保证每个输入框的v-model独立绑定，不会出现输入互相覆盖的问题。
• v-for的key属性必须加：这里用index是简单的做法，如果是复杂场景（比如涉及排序、筛选），建议用每个行对象的唯一ID来做key，避免渲染异常。
• Vue的响应式特性：当你往rows数组里push新对象时，Vue会自动检测到数据变化，然后渲染新的表单行，不需要手动操作DOM。

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