How to display a component at the end of a list

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.

https://stackoverflow.com/questions/66837502/how-to-display-a-component-at-the-end-of-a-list March 28, 2021 at 08:52AM