我创建了以下组件-
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值吗?