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


  <div class="container" @click="deleteTodo">



  import Todolist from './components/Todolist';

  export default {
    name: 'App',
    components: {
    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:

enter image description here

Can someone help me out?

Thanks in advance

1 thought on “Vue.js Can not see data in console.log”

  1. 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() {

Leave a Comment