如何在列表末尾显示零部件

Question

如何在列表末尾显示组件？假设我有一个包含如下对象的列表：

items: [
{name: 'Single Column', id: 1},
{name: 'Double Columns', id: 2},
{name: 'Triple Columns', id: 3},
{name: 'Custom', id: 0}
],

使用v-for来显示列表的内容是直接的(注意，我在这里使用的是Vuetify(：

<v-list>
<v-list-item
v-for="item in items"
:key="item.id"
link
@click="setDashboardBluePrint(item)"
>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item>
</v-list>

但现在假设我想要一个按钮，而不是项列表中最后一个元素的对象{name: 'Custom', id: 0}。假设我已经有了一个自定义按钮组件<Dialog/>，我该如何在堆栈中显示<Dialog/>组件，而不是{name: 'Custom', id: 0}所在的位置。

Answer 1

您可以使用slice获取除最后一项之外的所有项，并在模板中为最后一项附加另一个v-list-item：

<v-list>
<v-list-item
v-for="item in items.slice(0, items.length - 1)"
:key="item.id"
link
@click="setDashboardBluePrint(item)"
>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item>
<v-list-item>
<Dialog />
</v-list-item>
</v-list>