vue.js 렌더 함수의 단추에 이벤트 수신기 추가

vue.js 렌더 함수의 단추에 이벤트 수신기 추가

나는 Vue.js 렌더 함수를 사용하여 javascript로 구성 요소를 만들고 싶다.이제 나는 HTML 구조를 SPAN 하나와 BUTON 하나를 만들 수 있다. 버튼을 클릭하면 콘솔에서 출력되리라 예상하지만, 그것은 작동하지 않는다.여기 내 코드:

<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에 어떠한 응답도 환영하고 고맙다.

당신의 사용법createElement당신이 잘못된 일련의 논쟁들을 전달하고 있기 때문에 당신의 버튼을 만들 때 방법은 부정확하다.

우선 내부 html을 설정해야 한다.+설명서에 따라 데이터 개체에 예약된 두 번째 인수를 통하지 않고 버튼 속성 개체를 통해:

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

따라서 단추를 다음과 같이 구성해야 한다.

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

둘째, 단추참고자를 두 번째 인수로 전달해야 한다.createElement위의 문서에 따라 호출:

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

작업 코드펜을 참조하십시오.

참조URL: https://stackoverflow.com/questions/40778492/vue-js-add-event-listener-to-button-in-render-function