时间戳

首页 > 解决方案 > 在应用程序的另一部分显示 v-menue 的选定选项。验证

javascript - 在应用程序的另一部分显示 v-menue 的选定选项。验证

问题描述

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

这是 v-menu 的代码，我想在其中显示所选选项：

<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}
    ]
  }
}

标签： javascriptvue.jsmenuvuetify.js

解决方案

请使用hasan而不是this.hasan在您的 HTML 中：

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

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

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

推荐阅读