I don't know why but this error Property 'myfunc' was accessed during render but is not defined on instance is keeps on showing. I am sharing my Html and js code.
const ListRenderingApp = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
},
method : {
myfunc(){
console.log('drats')
}
}
}
Vue.createApp(ListRenderingApp).mount('#list-rendering')
And the Html files code is
<div id="list-rendering" class="demo">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
<button v-on:click="myfunc"> Click me</button>
</div>
I am very new to Vue.js. So, if anyone can please help me with this question.
I understood the error. And came up with the solution as well.
Firstly, In the ListRenderingApp after the data function. It should be methods. And secondly, in the console.log() statement it should be console.log(this.todos).
Working Demo :
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
},
methods : {
myfunc() {
console.log('drats')
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
<button v-on:click="myfunc"> Click me</button>
</div>