vue.js - 如何在列表末尾显示组件

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}本来的位置。

标签： vue.jsvuetify.js

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>