javascript - 在应用程序的另一部分显示 v 菜单的选定选项。维特化

Question

所以我有一个带有一些选项的 v 菜单。现在我想在我的应用程序的另一部分(同一组件)中显示所选选项。我尝试使用 v-model 来做到这一点，但它不起作用。最好的方法是什么？

这是 v 菜单的代码，我想在其中显示所选选项:

<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>
.
.

这是脚本代码:

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

Answer 1

请在 HTML 中使用 hasan 而不是 this.hasan:

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

或者，如果v-model不起作用，您可以尝试在boardSwitch函数中设置hasan值:

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

请不要忘记在 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>