Vue.js Can not see data in console.log

Question

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

I don't see any issue with the code, still I would say its not enough to debug this issue. We need to see the full code. — Beshambher Chaukhwan, Feb 15 '21 at 09:29
@BeshambherChaukhwan the error occured inside the methode code block, which I used an arrow function at deleteTodo: () => {, I changed it into function() {, and that worked — Valdemar Vreeman, Feb 15 '21 at 09:32

score 3 · Accepted Answer · edited Jul 15 '22 at 22:28

3

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

edited Jul 15 '22 at 22:28

tony19

125,647
18
229
307

answered Feb 15 '21 at 09:27

wangdev87

8,611
3
8
31

Why is that. Does Vue.js not allow arrow functions inside an methode code block? – Valdemar Vreeman Feb 15 '21 at 09:29
please check the below part of the link i provided. – wangdev87 Feb 15 '21 at 09:30
It also contain an undefined after it is rendered. Do you know why? – Valdemar Vreeman Feb 15 '21 at 09:31
@user12380607 May be [this question](https://stackoverflow.com/questions/34538331/why-is-this-not-working-in-an-es6-arrow-function) answer your question – Abdul Niyas P M Feb 15 '21 at 09:32
1

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. – wangdev87 Feb 15 '21 at 09:32
@WilliamWang when I use an array id it also show an undefined message, why is that, because the first time he see it? – Valdemar Vreeman Feb 15 '21 at 09:36
what do you mean? array id? since `this` is not allowed in arrow function, you can't use anything with combination of `this.` – wangdev87 Feb 15 '21 at 09:36
I change it into a normal function(id), but then I want to show the this.todos[id]. The first ourput is the object and the second output is an undefined @WilliamWang – Valdemar Vreeman Feb 15 '21 at 09:42
can you update the codebase in the question? – wangdev87 Feb 15 '21 at 09:43
also, attach the console.log(id) and display the result – wangdev87 Feb 15 '21 at 09:45
change it to `deleteTodo: function(id) { console.log(id) console.log(this.todos[id]); }` and display the result – wangdev87 Feb 15 '21 at 09:48
It says NaN and undefined @WilliamWang – Valdemar Vreeman Feb 15 '21 at 09:53
then it is the problem of the other part of your codebase, - Todolist componen.t – wangdev87 Feb 15 '21 at 10:28

Vue.js Can not see data in console.log

1 Answers1