如何在列表末尾显示组件

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>

如何在列表末尾显示组件

How to display a component at the end of a list

vue.js

vuetify.js