I am trying to use the Vue.js Render function to create a component in JavaScript. Currently, I have set up an HTML structure with one SPAN and one BUTTON. When I click the button, I expect it to output in the console. However, it is not working as expected. Here is my code:
<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>
View and interact with the code here on CodePen. Feel free to provide any feedback or suggestions. Thank you!