change the text of another div by clicking another item in list using vuejs typescript

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.

Leave a Comment

Your email address will not be published.

Scroll to Top