v-在 table 行中重复

Question

我有 table 封电子邮件，其中 <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

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

Answer 2

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

v-在 table 行中重复

v-repeat in table rows

html

vue.js