Question

我是vue和vuetify的新手。我需要创建一个子菜单，为此，我正在使用v菜单。它是通过迭代构造的，在这里我需要每个子菜单为其分配一个方法。但事实证明，我这样做的方式会产生错误 [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

Answer 2

您正在传递方法的名称-字符串-而不是函数。由vue生成的click事件监听器正在尝试使用apply调用函数，这就是为什么您会收到该错误的原因。

一种解决方案是在Vue实例为created时直接传递函数（在此之前，该方法可能不可用，因此将其直接传递给数据{ title: 'Click Me1', f: this.login }无效）。

例如，您可以在数据中保留方法名称，并在创建时将其替换为实际方法：

new Vue({
 el: '#app',
  data: () => ({
    items: [
      { title: 'Click Me1', f: 'login' }
    ]
  }),
  created () {
    this.items.forEach(item => {
      item.f = this[item.f]
    })
  },
  methods: {
    login (){
      console.log('login')
    }
  }
})

通过迭代创建菜单时出现问题

2 个答案: