Vue.js method undefined in component

Question

I am trying to pass a click method as a prop to my component's child's child. However, it seems like it works fine if the method doesn't take any parameters. However, if it takes parameters, Vue.js sends me a Invalid handler for event "click": got undefined error.

Here's my top-level component:

  new Vue({
    el: '#app',
    created: function () {
    },
    methods: {
      action1: function () {
        console.log('--action 1--')
      },
      action2: function (word) {
        console.log('--action 2--', word)
      }
    }
  });

Here's my child component:

  Vue.component('parent-component', {
    template: '#parent-component',
    data () {
      return {
        menuItems: [
          {
            label: 'Action 1',
            onClick : this.action1
          },
          {
            label: 'Action 2',
            onClick : this.action2('two')
          }
        ]
      }
    },
    props: ['action1', 'action2']
  });

  <template id="parent-component">
    <action-menu :actions="menuItems"></action-menu>
  </template>

And here is my lowest level component:

  Vue.component('action-menu', {
    template: '#action-menu',
    props: ['actions'],
  });

<template id="action-menu">
  <div>
    <div v-for="action in actions">
      <button @click="action.onClick">{{ action.label }}</button>
    </div>
  </div>
</template>

Here is my fiddle - http://jsfiddle.net/11sfg1p8/ - notice how the first button works, but the second button doesn't and the only difference is the second button takes a parameter. Anyone have any idea what's going on?

Thanks in advance!

Amresh Venugopal · Accepted Answer · 2017-04-16 16:32:11Z

1

Inside the child component, second element of menuItems has an onClick property which is not a function but the returned value of the function.

Notice the difference closely:

menuItems: [
      {
        label: 'Action 1',
        onClick : this.action1 // assigning a function
      },
      {
        label: 'Action 2',
        onClick : this.action2('two') // assigning a value
        // because of invocation of the function, 
        // which essentially returns undefined.
      }
    ]

undefined is returned because the function:

action2: function (word) {
  console.log('--action 2--', word)
}

returns nothing. and hence:

Invalid handler for event "click": got undefined

You could bind the argument two to the function if that is how you intend to use it like in this fiddle.

edited Apr 16, 2017 at 16:32

answered Apr 16, 2017 at 16:11

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bert Over a year ago

Pretty sure you meant this.action2.bind(null, 'two') in that fiddle (or whatever this you intend).

Amresh Venugopal Over a year ago

@BertEvans Oh sorry, and this.action2.bind(this, 'two') might be a better choice?

Bert Over a year ago

The first argument to bind is what this will be inside the bound function. You're saying this should be two.

Bert Over a year ago

It depends on what this is required (what you want this to refer to).

Bert Over a year ago

If this will not be used in the function, then bind(null, ...) is acceptable. See the "Partially applied functions" section of the MDN documentation you linked.

|

Collectives™ on Stack Overflow

Vue.js method undefined in component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related