Как передать функцию с аргументами через массив объектов JavaScript?

Question

У меня есть список элементов, и я хочу, чтобы накормить свои данные из массива JavaScript:

// 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() 
    } 
} 

Но сейчас я получаю эту ошибку:

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

Это означает, что я ошибочно передавая значение action.

Каков правильный способ?

Answer 1

Я не знаком с vue.js, но from the documentation, click связывание ожидают функцию.

Может быть, вы можете попробовать следующее:

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

Затем в HTML:

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

Или вы могли бы попробовать что-то вроде:

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

в вашем HTML:

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