どのようにVueの$ createElementメソッドに引数を渡す

Question

私はVueの$のcreateElementコードにhttp://element.eleme.io/#/en-US/component/tree#custom-node-contentでの例からJSXコードを変換しようとしている

元のコードスニペット：

renderContent(h, { node, data, store }) { 
    return (
     <span> 
     <span> 
      <span>{node.label}</span> 
     </span> 
     <span style="float: right; margin-right: 20px"> 
      <el-button size="mini" on-click={() => this.append(store, data) }>Append</el-button> 
      <el-button size="mini" on-click={() => this.remove(store, data) }>Delete</el-button> 
     </span> 
     </span>); 
    } 
} 

と変換するための私の試み：

renderContent (h, { node, data, store }) { 
    return h('SPAN', [ 
     h('SPAN', [h('SPAN', node.label)]), 
     h('SPAN', {attrs: {style: 'float: right; margin-right: 20px'}}, [ 
     h('el-button', { attrs: { size: 'mini', on: { click: this.append(store, data) } } }, 'Append'), 
     h('el-button', { attrs: { size: 'mini', on: { click: this.delete } } }, 'Delete') 
     ]) 
    ]) 
    } 

が、それは失敗します。常にすべてのノードのレンダリングとは決して後の時点で実行さAppendボタンを。ボタンDeleteはまったく実行されません。

したがって、引数を持つイベントハンドラを作成された要素に適切に渡すにはどうしたらいいですか？

Answer 1

これは、コンテンツをレンダリングするときに実際にappend関数を呼び出すためです。

{ 
    attrs: { size: 'mini' }, 
    on: { click: this.append.bind(this, store, data) } 
} 

またはJSXスニペットと同じソリューションを使用する：この試してみてくださいどちらの方法

{ 
    attrs: { size: 'mini' }, 
    on: { click:() => this.append(store, data) } 
} 

をクリックイベントが発生したときに呼び出される関数を提供します。

onのキーはattrsに兄弟であり、内部ではないことに注意してください。