I am still learning Vue and may not have all the answers. Currently, I am working on a feature that changes the text of another div based on the item I select from a list. You can find the code sandbox link below along with my current implementation.
Code Sandbox Link: https://codesandbox.io/s/vuetify-ts-mod-forked-5fbvd
<template>
<div>
<v-menu bottom left>
<template v-slot:activator="{ on }">
<v-btn text class="align-self-center mr-4" v-on="on">
{{ item.car }} <----this is failing, should match the item I selected in the menu
<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 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 {
console.log("item==========", item);
}
}
</script>