Wie man eine Funktion mit Argumenten über JavaScript-Objekt-Array übergeben?

Question

Ich habe eine Liste der Elemente, und ich möchte seine Daten von einem JavaScript-Array füttern:

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

Aber jetzt bekomme ich diesen Fehler:

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

Was bedeutet, dass ich bin den Wert von action falsch übergeben.

Was ist die richtige Art, es zu tun?

Answer 1

Ich bin nicht vertraut mit vue.js, aber , die click Bindung erwarten eine Funktion.

Vielleicht könnten Sie versuchen, die folgenden:

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

Dann in Ihrem html:

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

Oder Sie auch so etwas wie versuchen könnte:

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

in Ihrem HTML:

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