Problem when creating a menu by iteration

Question

I'm new to vue and vuetify. I need to create a submenu and for that I am using v-menu. Its construction is by iteration, where I need each sub menu to assign it a method. But it turns out that the way I'm doing it generates an error [Vue warn]: Error in v-on handler: 'TypeError: handler.apply is not a function' . What am I doing wrong? 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')}
  }
})

score 1 · Accepted Answer · answered Apr 15 '19 at 14:21

Try to pass the method name to another one and handle it inside the last one like :

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

inside the methods :

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

check this codepen

score 1 · Answer 2 · edited Jul 16 '22 at 00:40

You are passing the method's name - a string - instead of a function. The click event listener generated by vue is trying to call a function using apply, this is why you are getting that error.

One solution would be to pass directly the function when the Vue instance is created (before that, the method might not be available, so passing it directly to the data { title: 'Click Me1', f: this.login } would not work).

For example, you could keep having method names in the data, and replace them with the actual methods at create:

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')
    }
  }
})

Problem when creating a menu by iteration

2 Answers2