I am trying to make a to-do list app where the list is filled with tasks from an API. I also want to be able to add tasks and have them saved when I refresh. Yet I cann't seem to merge the two arrays, the API and the user inputted tasks. For now, I'd like to save them to my local storage, however, it is not working and I cannot figure it out. Also, I am unable to figure out how to do this in my created function. Could anyone point me to any resources or can immediately see what is wrong? Any help is greatly appreciated!
var app = new Vue({
el: '#app',
data () {
return {
items: [{
title: "",
completed: false,
}],
title: '',
show: 'all',
}
},
mounted () {
if(localStorage.getItem('items')) {
try {
this.items = JSON.parse(localStorage.getItem('items'));
} catch(e) {
localStorage.removeItem('items');
}
}
},
created: function () {
axios
.get("https://jsonplaceholder.typicode.com/todos")
.then(response => this.items = response.data)
items.concat(items)
},
computed: {
activeItems() {
this.saveItems;
return this.items.filter(item => {
return !item.completed;
});
},
filteredItems() {
if (this.show === 'active')
return this.items.filter(item => {
return !item.completed;
});
if (this.show === 'completed')
return this.items.filter(item => {
return item.completed;
});
return this.items.reverse();
},
},
methods: {
addItem() {
this.items.push({
title: this.title,
completed: false
});
this.title = '';
this.saveItems();
},
deleteItem(item) {
var index = this.items.indexOf(item);
if (index > -1)
this.items.splice(index, 1);
this.saveItems();
},
saveItems() {
const parsed = JSON.stringify(this.item);
localStorage.setItem('items', parsed);
},
showActive() {
this.show = 'active';
},
showAll() {
this.show = 'all';
},
showCompleted() {
this.show = 'completed';
},
deleteCompleted() {
this.items = this.items.filter(item => {
return !item.completed;
});
},
}
});
please have a look at this article - Creating a Simple To-do App With Vue: List Rendering, And Class Binding
In your case you should use either created or mounted function. No need to use both. If you use both, you should know the correct order in which they are called. However, there are promises and async code. So, I recommend using only one.
You can do something like below
mounted () {
axios
.get("https://jsonplaceholder.typicode.com/todos")
.then(response => {
const apiItems = response.data;
if(localStorage.getItem('items')) {
try {
this.items = apiItems.concat(JSON.parse(localStorage.getItem('items')));
} catch(e) {
localStorage.removeItem('items');
this.items = apiItems;
}
}
})
},
Step 1: HTML template
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item.title }}</li>
</ul>
<div>
<input type="text" v-model="title" />
<button type="button" @click.prevent="addItem">Add</button>
</div>
</div>
Step 2: Update your add button action event
addItem() {
const data = {
title: this.title,
completed: false,
};
this.items.push(data);
this.saveItems(data);
this.clearForm();
},
Step 3: Update your saveItems method
Before adding to localStorage you have to consider below steps,
Have to check already have localStorage data
If already have localStorage data then you have to push the new values to the old array
If no localStorage data then you have to save the new values in an array format
saveItems(item) {
var localSaveItems = [];
var getLocalItems = localStorage.getItem("items");
if (getLocalItems) {
getLocalItems = JSON.parse(getLocalItems);
localSaveItems = [...localSaveItems, ...getLocalItems];
localSaveItems.push(item);
localStorage.setItem("items", JSON.stringify(localSaveItems));
} else {
localSaveItems.push(item);
localStorage.setItem("items", JSON.stringify(localSaveItems));
}
},
clearForm() {
this.title = "";
},
Step 4: Update the create function
created: function () {
axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
this.items = response.data;
if (localStorage.getItem("items")) {
try {
this.localStorageItems = JSON.parse(localStorage.getItem("items"));
this.items = [...this.items, ...this.localStorageItems];
} catch (e) {
localStorage.removeItem("items");
}
}
});
},
Once loaded the REST API data you have to check already having localStorage data or not. If you have localStorage data then you have join two arrays.
Using Spread operation you can join two arrays like below,
this.items = [...this.items, ...this.localStorageItems];