Vue组件表格添加行后立即消失问题排查求助

你的问题并非Vue响应式机制导致，核心原因是：
Add按钮的类型为submit，且组件被包裹在<form>标签内。点击submit类型按钮会触发表单的默认提交行为，导致页面刷新，刚添加的表格行因此被重置消失。

两种可行解决方案： #

• 方案1：修改按钮类型为button
  将组件模板中的按钮代码替换为：

  <input v-on:click="addPanelChild" class="button" name="button" type="button" value="Add" />
  

  button类型的按钮不会触发表单提交，仅执行绑定的点击逻辑。

• 方案2：阻止事件默认行为
  在点击事件上添加.prevent修饰符，直接阻止表单提交：

  <input v-on:click.prevent="addPanelChild" class="button" name="button" type="submit" value="Add" />
  

  或者在方法中手动阻止：

  addPanelChild: function(event) {
    event.preventDefault();
    this.$emit("add-panel");
  }
  

修改后，点击Add按钮只会执行添加表格行的逻辑，页面不会刷新，新增的行就能正常保留。

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