我们可以在Vue.js组件的渲染功能中使用道具吗?

时间:2018-12-31 01:24:42

标签: vue.js vuejs2 vue-component

我创建了以下组件-

Vue.component('tick-button', {
    data(){
        return {  count:0}
    },

props:{
    tick:{type: Boolean, default: false},
    tickNumber:{type: Number, default: 0}
},

render(createElement){
    return createElement('button', {
        'class':'button tick',
        attrs:{value: this.tickNumber},
        on:{
            click(e){
                console.log(this.tick+ "-" + this.tickNumber);
                var reqData = {
                        isTick: this.tick,
                        tickNumber: e.srcElement.value
                };
                fetch("http://localhost:8080/tickcounter/", 
               {
                    body: JSON.stringify(reqData),
                    method: "POST",
                    headers: {"Content-Type": "application/json",},
                })
                .then(response => response.json()).then((data) => {})
            }
        }
    }, this.tickNumber)
}

})

现在用作-

<tick-button tickNumber="0" v-bind:tick='true'></tick-button>
<tick-button tickNumber="1" v-bind:tick='true'></tick-button>
通过此API调用传递的

JSON值为-

{
    "tickNumber": 1
}

现在,当我单击此按钮时,正在进行REST调用,但是它无法为请求json中的tick元素传递布尔值。即使在控制台中打印日志也是如此-

undefined-1

似乎在渲染函数中无法访问prop值。知道如何在Vue组件的渲染功能中访问prop值吗?

0 个答案:

没有答案