表行

Question

我有<TR>个v-repeat重复的电子邮件表，后跟一个<TR>，用于显示添加新电子邮件的空表单。

问题是，带有空格式的<TR>始终显示为现有电子邮件<TR>列表之前的第一行。

有没有办法强制<TR>使用空的电子邮件表单在电子邮件列表<TR>之后呈现？

<section v-show="emails" v-cloak>
    <table id="email-list">
        <tbody>
            <tr
                v-repeat="email: emails"
                class="email"
                v-class="
                    editing   : this == editedEmail
                "
            >
                <td>
                    <input
                        class   = "edit"
                        type    = "text"
                        v-model = "email.address | addressValidator"
                        v-on    = "
                            click : editAddress(this, $index),
                            blur  : doneEdit(this, $index),
                            keyup : doneEdit(this, $index) | key 'enter',
                            keyup : cancelEdit(this, $index) | key 'esc'
                        "
                    >
                </td>
                <td>
                    <a
                            class="btn btn-xs btn-danger"
                            style="cursor:pointer;"
                            v-on="click: removeEmail(this, $index)"
                            >
                        <i class="fa fa-trash"></i>
                    </a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr
                class="email"
                v-class="
                    editing   : this == editedEmail
                "
            >
                <form
                    id="add-new-form"
                    v-on="submit:addNew"
                >
                    <input
                        id="0"
                        autofocus
                        autocomplete="off"
                        placeholder="New Email Address"
                        v-model="newEmail.address | addressValidator"
                    >


                    <button
                        type="submit"
                        v-show="newEmail.address && validation.address"
                        class="btn btn-xs btn-success"
                        style="cursor:pointer;"
                    >
                        <i class="fa fa-plus"></i>
                    </button>

                </form>
            </tr>
        </tfoot>
    </table>
</section>

Answer 1

表单不能是表行的直接子表单。把它放在桌子之外，因为它不是数据的一部分。

Answer 2

@Samuel De Backer在他对我的问题的评论中指出了这个问题。