How to display a component at the end of a list

user_11140242 0
Viewed 192

how would I go about displaying a component at the end of a list? Suppose that I have a list containing objects like below:

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

Using a v-for to display the content of the list is straight forward (Note I'm using Vuetify here):

<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>

But suppose now that instead of the object {name: 'Custom', id: 0} for the last element in the items list, I want to have a button. And lets suppose that I already have a custom button component, <Dialog/> how would I go about displaying the <Dialog/> component in a stack, taking place of where {name: 'Custom', id: 0} would have been.

vuetify.js vue.js
1 Answers

You could use slice to get all items but the last, and append another v-list-item in the template for the last 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>
user_62771510
Related