<template>
<div class="hello">
<h1>I'm a customer</h1>
<div>
<ul v-for="todo in todos" :key="todo">
<li>{{todo.id}}</li>
<li>{{todo.title}}</li>
<li>{{todo.userId}}</li>
</ul>
</div>
<button
@click="getTodo()">
Buy Tv
</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed: {
todos() {
return this.$store.state.todos
}
},
methods: {
getTodo() {
this.$store.dispatch('getTodo')
}
}
}
</script>state: {
todos: [],
},
mutations: {
setTodo(state, payload) {
state.todos = payload
}
},
actions: {
getTodo(context) {
for(let i = 1; i <= 9; i++) {
Axios.get(`https://jsonplaceholder.typicode.com/todos/${i}`)
.then(response => {
let {data} = response.data
context.commit('setTodo', data)
})
.catch(error => {
console.log(error)
})
}
}
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Но хотелось бы узнать почему nuxt выдает ошибку в этом коде.
Я вытаскиваю state из vuex с помощью computed и отображаю с помощью v-model, все работает до тех пор пока я не перезагружаю страницу.
Вот код:
Ошибка при перезагрузке