Vue.js Can not see data in console.log

Today I have to debug my todo App, but can’t see the todo array elements in console.log

Code:

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

I tried to do it in Parent and child components, but both didn’t work, even if I try this.todos.

Also got an undefined message:

Can someone help me out?

Thanks in advance

Answer

Make deleteTodo as a normal function, rather than arrow function.

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Refer to here.

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