Try to add currentItem
property and update one you click on the list item inside the addItem
method:
<template>
<div>
<v-menu bottom left>
<template v-slot:activator="{ on }">
<v-btn v-if="currentItem" text class="align-self-center mr-4" v-on="on">
{{ currentItem.car }}
<v-icon small class="pl-3">fa-caret-down</v-icon>
</v-btn>
</template>
<v-list class="lighten-3">
<v-list-item
v-for="(item, index) in cars"
:key="index"
@click="addItem(item)"
>
{{ item.car }}
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Dropdown extends Vue {
public currentItem:any=null
public cars: any[] = [
{ id: 2, car: "GZ", configs: null },
{ id: 3, car: "AB", configs: null },
{ id: 5, car: "C4", configs: null },
{ id: 1, car: "PA", configs: null },
];
public addItem(item): void {
this.currentItem=item
}
}
</script>
CLICK HERE to find out more related problems solutions.