JavaScript nesne dizisi aracılığıyla argümanlarla bir işlev nasıl iletilir?

Question

Ben öğe listesi var ve bir JavaScript diziden verilerini beslemek istiyorum:

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

Ama şu anda bu hatayı alıyorum:

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

beni şey Anlamı action değerini yanlış aktarma.

Bunu yapmanın doğru yolu nedir?

Answer 1

vue.js, ama from the documentation ile aşina değilim, click bağlaması bir işlev bekler.

Sonra

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

sizin html:

Belki şunu deneyebilir

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

Ya da böyle bir şey deneyebilirsiniz: HTML'nize

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

:

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