Javascript Vue.js在for循环中关闭表单标记

我使用Vue.js创建一个表，其中每一行都是带有提交按钮的表单，我使用的代码如下：

  <div id="admin-user">
    <table class="table">
      <tr v-for="(user, index) in users">
        <form action="/ajax/submit/admin/user.php">
          <td class="spacer"><input type="text" class="form-control" :value="user.id" readonly></td>
          <td class="spacer"><input type="text" class="form-control" name="fullname" :value="user.fullname"></td>
          <td class="spacer"><input type="text" class="form-control" name="username" :value="user.username"></td>
          <td class="spacer"><input type="text" class="form-control" name="email" :value="user.email"></td>
          <td class="spacer"><input type="text" class="form-control" name="phone" :value="user.phone"></td>
          <td class="spacer"><input type="text" class="form-control" name="company" :value="user.company"></td>

          <input type="hidden" name="id" :value="user.id">
          <td class="spacer"><button type="submit" class="btn btn-success btn-block btn-lg right"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></td>
        </form>
      </tr>
    </table>
  </div>

当然，我也有JavaScript中的Vue.js代码，但我认为没有必要解决这个问题，而且它相当长，所以我不会用它来打扰任何人。 样式很好，但是表单不起作用，所以我用inspector工具查看了一下，这就是我发现的

---

结果是

标记过早关闭。我不明白为什么会发生这种情况，这也意味着我不知道如何解决它。我希望有人能解释为什么会发生这种情况。

问题不在于Vue.js甚至Javascript，而在于HTML本身。HTML不允许直接在表（行）中使用表单标记。看看哪个有一些有效的解决方案