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>

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.

fractal tree

The drawTree function is called recursively to draw smaller branches, which in turn spawn even smaller branches, creating the fractal pattern.

OpenAI

OpenAI je osnovan 2015. godine, s ciljem razvijanja umjetne inteligencije na način koji će biti siguran i koristan za društvo.

Css

CSS je ključan dio web dizajna i korišten je u skoro svakoj web stranici na internetu.

Blender

Blender je besplatni open source softvera za 3D računalnu grafiku koji se koristi za stvaranje animiranih filmova, vizualnih efekata, umjetnosti, 3D tiskanih modela

Php

PHP je skriptni jezik koji se može koristiti za izgradnju dinamičkih web stranica i aplikacija.