在表格行中重复 v-repeat

Posted 2023-02-22

【中文标题】在表格行中重复 v-repeat

【英文标题】：v-repeat in table rows

【发布时间】：2015-09-24 01:43:27

【问题描述】：

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

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

有没有办法强制<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>

【问题讨论】：

Form 不能是 tr 的直接子级。为什么不把 for 放在桌子外面？

哇！这么明显的东西！！！实际上，我所要做的就是将表单包装在 TD 中！ :) 谢谢。

最好将表单放在表格之外，因为它不是数据的一部分。

【参考方案1】：

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

【参考方案2】：

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