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
– Beshambher Chaukhwan, Commented Feb 15, 2021 at 9: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 — user11461061
– user11461061, Commented Feb 15, 2021 at 9:32

tony19 · Accepted Answer · 2022-07-15 22:28:49Z

2

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, 2022 at 22:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 15, 2021 at 9:27

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

user11461061 Over a year ago

Why is that. Does Vue.js not allow arrow functions inside an methode code block?

topdev87 Over a year ago

please check the below part of the link i provided.

user11461061 Over a year ago

It also contain an undefined after it is rendered. Do you know why?

user459872 Over a year ago

@user12380607 May be this question answer your question

topdev87 Over a year ago

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.

|

Collectives™ on Stack Overflow

Vue.js Can not see data in console.log

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related