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

Question

我使用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代码，但是我认为解决这个问题不是必需的，而且时间很长，因此我不会打扰任何人。 样式看起来不错，但是表格无法使用，所以我使用了检查器工具，这就是我发现的结果

结果发现</form>标签过早关闭。我不明白为什么会这样，这也意味着我不知道如何解决。我希望有人能解释为什么这会发生在我身上。

Answer 1

问题不是因为Vue.js甚至Javascript，而是因为HTML本身。 HTML不允许直接在表（行）内部使用表单标签。看看this question那里有一些可行的解决方案。