Question

所以我有一个带有一些选项的v菜单。现在，我想在应用的另一部分（相同的组件）中显示所选的选项。我尝试使用v模型进行操作，但无法正常工作。最好的方法是什么？

这是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不起作用，您可以尝试在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>

在应用程序的另一部分中显示v菜单的选定选项。威化

1 个答案: