Vue.js 在console.log 中看不到数据答案

【问题标题】：Vue.js Can not see data in console.logVue.js 在console.log 中看不到数据
【发布时间】：2021-05-18 04:32:56
【问题描述】：

今天要调试我的 todo 应用，但是在 console.log 中看不到 todo 数组元素

代码：

<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]);
      }
    },
    
  }

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

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

谁能帮帮我？

提前致谢

【问题讨论】：

我没有看到代码有任何问题，但我会说它不足以调试这个问题。我们需要查看完整的代码。
@BeshambherChaukhwan 错误发生在方法代码块中，我在 deleteTodo 处使用了箭头函数：() => {，我将其更改为 function() {，并且有效
太好了:)

标签： javascript vue.js ecmascript-6

【解决方案1】：

将deleteTodo 设为普通函数，而不是箭头函数。

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

请参阅here。

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

【讨论】：

为什么会这样。 Vue.js 是否不允许在方法代码块中使用箭头函数？
请检查我提供的链接的以下部分。
渲染后还包含一个未定义。你知道为什么吗？
@user12380607 可能是this question 回答你的问题
由于箭头函数没有this，所以this会被当作任何其他变量对待，并通过父作用域进行词法查找直到找到，通常会导致Uncaught TypeError: Cannot read property of未定义或未捕获的类型错误：this.myMethod 不是函数。