«созданный» метод не вызывается в vue js - PullRequest
Новая
       5

«созданный» метод не вызывается в vue js

0 голосов
/ 08 июля 2019

У меня есть мой главный компонент 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>

Откуда я знаю, что это не вызывается? Консольные операторы в методе не печатаются.

1 Ответ

1 голос
/ 08 июля 2019

Создано является частью жизненного цикла 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]
  },
}

Проверьте этот пример в своих документах.

...