I have a main component called App.vue. Within this component, I have defined the created method in my methods object. However, I am noticing that this method is never being executed.
<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>
I can tell that the method is not being called because the console statements within it are not being printed.