Vue.js 在console.log中看不到數據

Question

今天我要調試我的 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，兩者都不起作用。

還收到一條未定義的消息：

有人可以幫我嗎？

提前致謝

Answer 1

將deleteTodo設為正常的 function，而不是箭頭 function。

不要在選項屬性或回調上使用箭頭函數，例如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。 由於箭頭 function 沒有 this，因此 this 將被視為任何其他變量並通過父作用域進行詞法查找直到找到，通常會導致錯誤，例如 Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod不是 function。

參考這里。

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