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>

DALL-E

DALL-E je računalni program koji je razvio OpenAI kako bi stvorio slike korištenjem umjetne inteligencije.

fractal tree

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

React

React je vrlo popularna JavaScript biblioteka za izradu korisčkog sučelja, koja se koristi u velikom broju web aplikacija

GraphQL

GraphQL je jezik upita za API-je koji je nastao kao alternativa tradicionalnim REST API-jima.

Programiranje

Programiranje je vještina koja omogućava stvaranje računalnih programa i alata za automatizaciju zadataka.

Prijestupne godine

Javascript za prijestupne godine

Strojno učenje

Strojno učenje je revolucionarna tehnologija koja pomaže u automatiziranju zaključivanja iz podataka i stvaranju modela koji su u stanju generalizirati.