[英]vue.js add event listener to button in Render function
我想使用 Vue.js Render 函数在 javascript 中制作组件。现在我可以制作一个 SPAN 和一个 BUTTON 的 HTML 结构。当我单击按钮时,我希望它在控制台中输出,但它不起作用。这是我的代码:
<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) },
因此,您应该按如下方式构建您的 buttonAttrs 对象:
var buttonAttrs = {
on: { click: self.inc },
domProps: {
innerHTML: '+'
},
};
其次,您应该根据上述文档在createElement
调用中将 buttonAttrs 作为第二个参数传递:
var button = h('button', buttonAttrs, []);
请参阅此工作代码笔。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.