未在 vue js 上调用“创建”方法答案

【问题标题】：'created' method not being called on vue js未在 vue js 上调用“创建”方法
【发布时间】：2019-11-17 12:13:57
【问题描述】：

我有我的主要组件App.vue，我在我的方法对象中声明了created 方法。但它永远不会被调用。

<template>
  <div id="app">
    <Header />
    <AddTodo v-on:add-todo="addTodo" />
    <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo"/>
  </div>
</template>

<script>
import Todos from './components/Todos'
import Header from './components/layout/Header'
import AddTodo from './components/AddTodo'
import axios from 'axios'

export default {
  name: 'app',
  components: {
    Header,
    Todos,
    AddTodo
  },
  data() {
    return {
      todos: [
      ]
    }
  },
  methods: {
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    addTodo(newTodo) {
      this.todos = [...this.todos, newTodo]
    },
    created() {
      // eslint-disable-next-line no-console
      console.log('here');
      axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
              .then(res => this.todos = res.data)
              // eslint-disable-next-line no-console
              .catch(err => console.log(err));
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

  body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.4;
  }

  .btn {
    display: inline-block;
    border: none;
    background: #555;
    padding: 7px 20px;
    cursor: pointer;
  }

  .btn:hover {
    background: #666;
  }
</style>

我怎么知道它没有被调用？方法中的控制台语句没有被打印出来。

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

Created 是 Vue 生命周期的一部分，你应该从方法内部提取它。

name: 'app',
components: {
  Header,
  Todos,
  AddTodo
},
data() {
  return {
    todos: [
    ]
  }
},
created() {
  // eslint-disable-next-line no-console
  console.log('here');
  axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
          .then(res => this.todos = res.data)
          // eslint-disable-next-line no-console
          .catch(err => console.log(err));
},
methods: {
  deleteTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id)
  },
  addTodo(newTodo) {
    this.todos = [...this.todos, newTodo]
  },
}

在他们的文档中查看this example。

【讨论】：