vue.js - 通过迭代创建菜单时出现问题

Question

我是 vue 和 vuetify 的新手。我需要创建一个子菜单，为此我正在使用 v-menu。它的构造是通过迭代进行的，我需要每个子菜单为其分配一个方法。但事实证明，我这样做的方式会产生错误[Vue 警告]:v-on 处理程序中的错误:'TypeError:handler.apply 不是一个函数'.我究竟做错了什么？ https://codepen.io/maschfederico/pen/vMWBPV?editors=1011

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <v-menu>
        <template #activator="{ on: menu }">
          <v-tooltip bottom>
            <template #activator="{ on: tooltip }">
              <v-btn
                color="primary"
                dark
                v-on="{ ...tooltip, ...menu }"
              >Dropdown w/ Tooltip</v-btn>
            </template>
            <span>Im A ToolTip</span>
          </v-tooltip>
        </template>
        <v-list>
          <v-list-tile
            v-for="(item, index) in items"
            :key="index"
            @click="item.f"
          >
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>
new Vue({
  el: '#app',
  data: () => ({
    items: [
      { title: 'Click Me1',f:'login'},
      { title: 'Click Me2',f:'login' },
      { title: 'Click Me3',f:'login' },
      { title: 'Click Me4' ,f:'login' }
    ]
  }),
  methods: {
    login(){console.log('login')}
  }
})

Answer 1

尝试将方法名称传递给另一个方法名称并在最后一个方法中处理它，例如:

     <v-list-tile
        v-for="(item, index) in items"
        :key="index"
        @click="handle(item.f)"
      >

方法内部:

  methods: {
    handle(f){
      this[f]();
    },
    login(){console.log('login')}
  }

检查 this codepen