Property 'myfunc' was accessed during render but is not defined on instance

Question

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.

it should be `methods` instead of `method`: https://vuejs.org/v2/api/#methods — captainskippah, Jan 19 '22 at 09:41

score 0 · Answer 1 · answered Jan 19 '22 at 09:50

0

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).

answered Jan 19 '22 at 09:50

vijay singh

9
4

score 0 · Answer 2 · edited Jan 19 '22 at 12:27

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>

Property 'myfunc' was accessed during render but is not defined on instance

2 Answers2