Change text in another div from clicking another Item in list using Vue.js + typescript

Question

Still get the hang of Vue, so forgive my lack of knowledge here. I am currently trying to change the text of another div to match the item I selected in my list. Below is a codesanbox as well as what I currently have.

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

Wai Ha Lee · Accepted Answer · 2020-11-07 12:13:16Z

1

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>

edited Nov 7, 2020 at 12:13

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Nov 6, 2020 at 19:19

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user992731 Over a year ago

Keep getting "TypeError: Cannot read property 'car' of null" back

Boussadjra Brahim Over a year ago

Try to add v-if="currentItem" to v-btn

Boussadjra Brahim Over a year ago

i updated my answer, but you should also add custom type

Maarten Veerman · Accepted Answer · 2020-11-06 19:14:36Z

1

Your first item.car is outside the for loop, you therefore cannot access the item.

Change the first item.car into selectedItem.car.

Add a data function on your component:

data () {
    return {
        selectedItem: { car : '' }
    }
}

Now change your addItem function to:

addItem (item) {
    this.selectedItem = item
}

Basically we assign the selected item to a component data property which is reactive and accessible by your first div.

Note that the above code is not TS code, but you'll get the point.

answered Nov 6, 2020 at 19:14

Maarten Veerman

1,6211 gold badge10 silver badges10 bronze badges

1 Comment

Boussadjra Brahim Over a year ago

Yes this is valid when we use javascript version

Collectives™ on Stack Overflow

Change text in another div from clicking another Item in list using Vue.js + typescript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related