vue.js Render関数のボタンにイベントリスナーを追加

Question

Vue.js Render関数を使用してjavascriptでコンポーネントを作成したいのですが、今度はボタンをクリックすると1つのSPANと1つのBUTTONを作成できますコンソールの出力が、それはただwork.hereませんが、私のコードです：

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<div id="app"> 
    <counter></counter> 
</div> 
<script> 
    var a = { 
      data() { 
       return {count: 1} 
      }, 
      methods: { 
       inc() {console.log(this.count)} 
      }, 
      render:function(h){ 
       var self = this 
       var buttonAttrs ={ 
        on:{click:self.inc} 
        } 
       var span = h('span',this.count.toString(),{},[]) 
       var button = h('button','+',buttonAttrs,[]) 
       return h('div' 
       ,{}, 
       [ 
        span, 
        button 
       ]) 

      } 
     } 

    new Vue({ 
    el:'#app', 
    components:{ 
     counter : a 
    }} 
) 

</script> 

またはcodepen 上の任意の応答が歓迎され、あなたに感謝します。

Answer 1

不適切な一連の引数を渡しているため、ボタンを作成するときにcreateElementメソッドを使用すると正しく表示されません。

まず第一に、あなたのボタンの属性がdocumentationごとに、データオブジェクトのために予約されている第二引数を経由して、いないオブジェクトを介して、あなたは内部HTML +を設定する必要があります。このように

// {Object} 
// A data object corresponding to the attributes 
// you would use in a template. Optional. 
{ 
    // (see details in the next section below) 
}, 

を次のようにbuttonsAttrsオブジェクトを構造化する必要があります。

var buttonAttrs = { 
    on: { click: self.inc }, 
    domProps: { 
     innerHTML: '+' 
    }, 
}; 

次に、buttonAttrsを第2引数として渡す必要があります上記のドキュメントあたりのcreateElement呼び出しで：

var button = h('button', buttonAttrs, []); 

この作業codepenを参照してください。