未捕获（承诺）TypeError：this.fetchTasks 不是 function

Question

我正在使用 Vue.js，这是我的代码。 fetchTasks() 是一个异步 function 所以我看不出问题出在哪里。 我的数据在 http://localhost:3000/tasks 的 json 服务器上

这是代码：

<template>
  <div class="container">
    <HeaderApp @toggle-add-task="toggleAddTask" title="Task Tracker" :showAddTask="showAddTask" />
    <div v-show="showAddTask">
      <AddTask @add-task="addTask" />
    </div>
    <TasksApp @toggle-reminder="toggleReminder" @delete-task="deleteTask" :tasks="tasks" />
  </div>
</template>

<script>
import HeaderApp from './components/HeaderApp'
import TasksApp from './components/TasksApp.vue'
import AddTask from './components/AddTask.vue'

export default {
  name: 'App',
  components: {
    HeaderApp,
    TasksApp,
    AddTask
  },
  data () {
    return {
      tasks: [],
      showAddTask: false
    }
  },
  methods: {
    // set the property (showAddTask) to whatever it's not
    toggleAddTask () {
      this.showAddTask = !this.showAddTask
    },
    addTask (task) {
      this.tasks = [...this.tasks, task]
    },
    // to delete it on click
    deleteTask (id) {
      if (confirm('Are you sure?')) {
        this.tasks = this.tasks.filter((task) => task.id !== id)
      }
    },
    // да се смени reminder-от од true во false, т.е. од зелено да е (маркирано) во тоа да не е
    toggleReminder (id) {
      this.tasks = this.tasks.map((task) => task.id === id ? { ...task, reminder: !task.reminder } : task)
    }
  },
  async fetchTasks () {
    const res = await fetch('http://localhost:3000/tasks')
    const data = await res.json()

    return data
  },
  // a single task
  async fetchTask (id) {
    const res = await fetch(`http://localhost:3000/tasks/${id}`)
    const data = await res.json()

    return data
  },
  async created () {
    this.tasks = await this.fetchTasks()
  }
}
</script>

我尝试使用 await 调用它，但出现错误 Uncaught (in promise) TypeError: this.fetchTasks is not a function。

Answer 1

fetchTasks和fetchTask函数位于methods object 之外。将它们移到里面。

import HeaderApp from './components/HeaderApp'
import TasksApp from './components/TasksApp.vue'
import AddTask from './components/AddTask.vue'

export default {
  name: 'App',
  components: {
    HeaderApp,
    TasksApp,
    AddTask
  },
  data () {
    return {
      tasks: [],
      showAddTask: false
    }
  },
  methods: {
    // set the property (showAddTask) to whatever it's not
    toggleAddTask () {
      this.showAddTask = !this.showAddTask
    },
    addTask (task) {
      this.tasks = [...this.tasks, task]
    },
    // to delete it on click
    deleteTask (id) {
      if (confirm('Are you sure?')) {
        this.tasks = this.tasks.filter((task) => task.id !== id)
      }
    },
    // да се смени reminder-от од true во false, т.е. од зелено да е (маркирано) во тоа да не е
    toggleReminder (id) {
      this.tasks = this.tasks.map((task) => task.id === id ? { ...task, reminder: !task.reminder } : task)
    },
    async fetchTasks () {
      const res = await fetch('http://localhost:3000/tasks')
      const data = await res.json()
  
      return data
    },
    // a single task
    async fetchTask (id) {
      const res = await fetch(`http://localhost:3000/tasks/${id}`)
      const data = await res.json()
  
      return data
    },
  },
  async created () {
    this.tasks = await this.fetchTasks()
  }
}