コンポーネントでVue.jsメソッドが未定義です

Question

コンポーネントの子の子に小道具としてクリックメソッドを渡そうとしています。しかし、メソッドがパラメータを取らないとうまくいくようです。ただし、パラメータが必要な場合は、Vue.jsからInvalid handler for event "click": got undefinedというエラーが送信されます。ここで

は私のトップレベルのコンポーネントです：

new Vue({ 
    el: '#app', 
    created: function() { 
    }, 
    methods: { 
     action1: function() { 
     console.log('--action 1--') 
     }, 
     action2: function (word) { 
     console.log('--action 2--', word) 
     } 
    } 
    }); 

ここでは私の子コンポーネントです：

Vue.component('parent-component', { 
    template: '#parent-component', 
    data() { 
     return { 
     menuItems: [ 
      { 
      label: 'Action 1', 
      onClick : this.action1 
      }, 
      { 
      label: 'Action 2', 
      onClick : this.action2('two') 
      } 
     ] 
     } 
    }, 
    props: ['action1', 'action2'] 
    }); 

    <template id="parent-component"> 
    <action-menu :actions="menuItems"></action-menu> 
    </template> 

そして、ここでは私の最も低いレベルのコンポーネントである：ここで

Vue.component('action-menu', { 
    template: '#action-menu', 
    props: ['actions'], 
    }); 

<template id="action-menu"> 
    <div> 
    <div v-for="action in actions"> 
     <button @click="action.onClick">{{ action.label }}</button> 
    </div> 
    </div> 
</template> 

は私のバイオリンです - http://jsfiddle.net/11sfg1p8/ - 最初のボタンがどのように機能するかを確認しますが、2番目のボタンは表示されず、唯一の差分erenceは2番目のボタンでパラメータをとります。誰が何が起こっているか考えている？

ありがとうございます！

Answer 1

childItemsの2番目の要素には、関数ではなく関数の戻り値であるonClickプロパティがあります。違い密接

お知らせ：

menuItems: [ 
     { 
     label: 'Action 1', 
     onClick : this.action1 // assigning a function 
     }, 
     { 
     label: 'Action 2', 
     onClick : this.action2('two') // assigning a value 
     // because of invocation of the function, 
     // which essentially returns undefined. 
     } 
    ] 

undefinedが機能するので返されます。

action2: function (word) { 
    console.log('--action 2--', word) 
} 

何も返しません。 それゆえ：イベントの

無効ハンドラ「をクリックして」：それはあなたがこのfiddleのようにそれを使用する方法である場合は、関数に引数twoをbind可能性が未定義

を得ました。