在渲染期间访问了属性“myfunc”，但未在实例上定义答案

【问题标题】：Property 'myfunc' was accessed during render but is not defined on instance在渲染期间访问了属性“myfunc”，但未在实例上定义
【发布时间】：2022-01-19 09:39:46
【问题描述】：

我不知道为什么，但是这个错误Property 'myfunc' 在渲染期间被访问但没有在实例上定义 一直显示。我正在分享我的 Html 和 js 代码。

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

而 Html 文件的代码是

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

我对 Vue.js 很陌生。所以，如果有人可以帮我解决这个问题。

【问题讨论】：

应该是methods 而不是method: vuejs.org/v2/api/#methods

标签： javascript html vue.js vuejs2 vue-directives

【解决方案1】：

我理解错误。并提出了解决方案。

首先，在ListRenderingApp后面的data函数。应该是methods。其次，在 console.log() 语句中应该是console.log(this.todos)。

【讨论】：

【解决方案2】：

工作演示：

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>

【讨论】：