CODEWITHSUNDEEP
javascriptvue.jsmenuvuetify.js
mha
mha

Reputation: 637

Showing v-menue's selected option in another part of the application. Vuetify

So I have a v-menu with some options. Now I want to display the selected option in another part of my app (same component). I tried to do it using v-model but it doesn't work. What's the best way to do it?

This is the code for the v-menu and where I want to display the selected option:

<v-menu bottom transition="scale-transition" >
  <v-btn slot="activator">​ 
      28
  </v-btn>
  <v-list>
    <v-list-tile
      v-for="(item, index) in PIFBitems"
      :key="index"
      v-model="hasan"
      @click="boardSwitch('shoPFIB', index)"
      >
       <v-list-tile-title>{{ item.title }}</v-list-tile-title>
    </v-list-tile>
  </v-list>
</v-menu>
.
.
.
  <p class="chipPam13"
  >{{this.hasan}}</p>
.
.

This is the script code:

data() {
  return {
    hasan:'',
    PIFBitems:[
    {title: empty},
    {title: PIFB}
    ]
  }
}

Upvotes: 0

Views: 1445

Answers (1)

Irina Potapova
Irina Potapova

Reputation: 794

Please use hasan rather than this.hasan in your HTML:

<p class="chipPam13">{{hasan}}</p>

Or if v-model doesn't work, you can try to set hasan value at boardSwitch function:

...
methods: {
    boardSwitch (firstArg, secondArg, value) {
        ...
        this.hasan = value
    },
    ...
}

Please don't forget to add third argument to your function call in HTML:

<v-list-tile
  v-for="(item, index) in PIFBitems"
  :key="index"
  v-model="hasan"
  @click="boardSwitch('shoPFIB', index, item.title)"
  >
   <v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>

Upvotes: 2

Related Questions