Snimanje podataka sa vue.js
Da bi smo sadržaj todo liste (https://programiranje.com.hr/todo-lista) snimili u localStorage preglednika u kod dodajemo novu funkciju snimi() koja sprema array tasks. Ovjde koristimo JSON.stringify koji array pretvara u string te ga sa localStorage.setItem snima u local storage preglednika, pod imenom todoTasks.
Funkcija snimi() se poziva prilikom dodavanj ili brisanja novog task-a. Učitavanje vršimo pomoću funkcije ucitaj(), a JSON.parse pretvara string u array. Ovu funkciju pozivamo klikom na gumb ili prilikom učitavanja stranice sa created: function(){ this.ucitaj(); },
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<title>Todo list</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="naziv zadatka" v-model="taskInput">
<button @click="addItem">Dodaj</button>
<button @click="ucitaj">Učitaj</button><br>
<table id="todoTable">
<tr v-for="(task,index) in tasks">
<td><b>{{index + 1}}.</b></td><td>{{task.content}}</td><td><button @click="deleteItem(index)">Briši</button>
</td>
</tr>
<tr><td colspan="2">Ukupno:</td><td>{{ukupno}}</td></tr>
</table>
</div>
<script>
const app ={data(){
return{
taskInput : "",
tasks : [],
ukupno : 0,
}
},
created: function(){
this.ucitaj();
},
methods:{
addItem(){
if(this.taskInput!=""){
newTask = {
content : this.taskInput,
}
this.tasks.push(newTask)
this.taskInput=""
this.ukupno++;
this.snimi();
}
},
deleteItem(index){
this.tasks.splice(index, 1);
this.ukupno--;
this.snimi();
},
snimi() {
localStorage.setItem('todoTasks', JSON.stringify(this.tasks));
},
ucitaj() {
var j = JSON.parse(localStorage.getItem("todoTasks"));
if (j) {
this.tasks = j;
this.ukupno = j.length;
}
}
}
}
Vue.createApp(app).mount("#app")
</script>
</body>
</html>