Javascript Vue.js无法在console.log中查看数据

今天我必须调试todo应用程序，但在console.log中看不到todo数组元素

代码：

从“./components/Todolist”导入Todolist；
导出默认值{
名称：“应用程序”，
组成部分：{
托多利斯特，
},
数据（）{
返回{
待办事项：[
{
id:1，
文字：“泡一杯咖啡”，
核对：正确
}, 
{
id:2，
文本：“制作VueJS todo应用程序”，
勾选：假
}, 
....
]
}
},
方法：{
deleteTodo:函数（id）=>{
返回console.log（this.todos[id]）；
}
},
}

我尝试在父组件和子组件中执行此操作，但两者都不起作用，即使我尝试了此操作。todos

还收到一条未定义的消息：

有人能帮我吗

---

提前感谢

将

删除TODO

作为一个正常功能，而不是箭头功能

---

不要在选项属性或回调上使用箭头函数，例如created:（）=>console.log（this.a）或vm.$watch（'a'，newValue=>this.myMethod（））。由于arrow函数没有this，因此它将被视为任何其他变量，并通过父作用域进行词汇查找，直到找到为止，通常会导致错误，例如Uncaught TypeError:无法读取undefined或Uncaught TypeError的属性：this.myMethod不是函数

参考

---

我看不出代码有任何问题，但我仍然认为调试这个问题是不够的。我们需要查看完整的代码。@BeshambherChaukhwan错误发生在methode代码块中，我在deleteTodo（）中使用了一个箭头函数：（）=>{，我将其更改为函数（）{，这很好：）这是为什么。Vue.js不允许methode代码块中包含箭头函数吗？请检查我提供的链接的下面部分。它在呈现后还包含未定义的。你知道为什么吗？@user12380607可能会回答你的问题，因为箭头函数没有this，这将被视为任何o该变量并通过父作用域进行词汇查找，直到找到为止，通常会导致错误，例如Uncaught TypeError:无法读取undefined或Uncaught TypeError的属性：this.myMethod不是函数。

<template>
<!-- TEMPLATE FOR THE WHOLE APP -->
  <div class="container" @click="deleteTodo">

    <Todolist 
        :todos="todos" 
        :check="check" 
        :updateTodo="updateTodo" 
        :deleteTodo="deleteTodo" 
    />

  </div>
</template>

<script>
  import Todolist from './components/Todolist';

  export default {
    name: 'App',
    components: {
      Todolist,
    },
    data () {
      return {
        todos: [
          {
            id: 1,
            text: 'Making a cup of coffee',
            checked: true
          }, 
          {
            id: 2,
            text: 'Making an VueJS todo app',
            checked: false
          }, 
          ....
        ]
      }
    },
    methods: {
      deleteTodo: function(id) => {
        return console.log(this.todos[id]);
      }
    },
    
  }

      deleteTodo: function() {
        console.log(this.todos);
      }