CODEWITHSUNDEEP
javascriptvue.js
wyc
wyc

Reputation: 55273

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

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?

Upvotes: 1

Views: 2326

Answers (1)

cl3m
cl3m

Reputation: 2801

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>

Upvotes: 3

Related Questions