javascript - 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其中有一些可行的解决方案。