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>

Blender Layer Weight

Blender Layer Weight kako postaviti

Vue

Vue.js je moderna JavaScript biblioteka za izgradnju korisničkih sučelja za web aplikacije.

C #

C# je moderan, objektno orijentirani programski jezik

Home

Programiranje za početnike javascript, C#, Html

Osnove

HTML je skraćenica od Hyper Text Markup Language to je standardni jezik za kreiranje web stranica

Canvas API

Canvas API je jedna od ključnih tehnologija HTML5 koja omogućuje web stranicama da postanu interaktivne i dinamičke.

Baze

Koriste u kombinaciji s programskim jezicima poput SQL-a i sistemima za upravljanje bazama podataka kako bi se omogućilo brzo i sigurno upravljanje podacima.

C64

C64 je bio vrlo pristupačan i omogućio je mnogima da se upoznaju s računalstvom