How to pass a function with arguments via JavaScript object array?

Question

I have a list of items, and I want to feed its data from a JavaScript array:

// HTML
<ul
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action">{{ menuItem.name }}</a>
  </li>
</ul>

// DATA
data () {
  return {
    menuItems: [
      { name: 'Split up', action: this.split('up') },
      { name: 'Split down', action: this.split('down') },
      { name: 'Split left', action: this.split('left') },
      { name: 'Split right', action: this.split('right') }
    ]
  }

  // METHODS
  methods: {
    split (direction) {
    store.actions.openWindow(direction)
    store.actions.closeMenu()
  }
}

But right now I get this error:

[Vue warn]: v-on:click="menuItem.action" expects a function value, got undefined

Meaning that I'm passing the value of action wrongly.

What's the correct way of doing it?

cl3m · Accepted Answer · 2016-03-29 07:15:56Z

3

I'm not familiar with vue.js, but from the documentation, the click binding expect a function.

Maybe you could try the following:

menuItems: [
    // split function and arguments
    { name: 'Split up', action: this.split, arg: 'up' }
    // ...
]

Then in your html:

<ul>
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action(menuItem.arg)">{{ menuItem.name }}</a>
  </li>
</ul>

Or you could also try something like:

menuItems: [
    // create a new function
    { name: 'Split up', action: function() { return this.split('up') } }
    // ...
]

in your HTML:

<ul>
  <li v-for="menuItem in menuItems">
    <a @click="menuItem.action()">{{ menuItem.name }}</a>
  </li>
</ul>

edited Mar 29, 2016 at 7:15

answered Mar 29, 2016 at 7:10

cl3m

2,80121 silver badges21 bronze badges

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

1 Comment

wyc Over a year ago

Thanks. The second example only works like this: action: () => { return this.split('left') }.

Collectives™ on Stack Overflow

How to pass a function with arguments via JavaScript object array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related