Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> -->
    <style>

    .done {
	text-decoration: line-through;
	color: grey;
}


    </style>
</head>
<body>

    <div id="root" >

        Firstname: <input type="text" v-model="firstname"/>
        <button @click="addName">Add to list</button>
        <button @click="pocetni">Load</button>
        <button @click="remove">Remove all</button>

        <br/>
       <ul>
           <name-component :name='name' v-for="name, index in names" :class="{'done':name.completed}" >
               {{name.ime}}
            <button @click="finish(index)" >Finished</button>
            <button @click="removeAtIndex(index)">Remove at index</button>

            </name-component>
       </ul>
       <button @click="removeAllDone">Remove all done</button>
       <p> {{numberNames}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="main.js"></script> -->
    <script>

    Vue.component('name-component',{
        data(){
            return{
                isEditing: false
            }
        },
        props:['name'],
        template:`
            <div>
                <li v-show="!isEditing">
                    <slot></slot>
                    <button @click="clicked">Edit</button>
                </li>
                <div v-show="isEditing">
                        <input v-model="name.ime" />
                        <button @click="saved">Save edit</button>
                </div>
            </div>
        `,
        methods: {
            clicked(){

                this.isEditing = true;
            },
            saved(){
                this.isEditing = false;
            },


        }

    });

new Vue({
    el:'#root',
    data:{
        firstname:"",
        names:[
            {ime:'Buzo',completed:false},
            {ime:'Rahmanjinov', completed:true}
        ],

    },
    methods:{
        addName(){
            var newName = this.firstname.trim();
            if(!newName){return;}
            this.names.push(
                {ime: newName, completed:false}
            );
            this.firstname = ""
        },
        pocetni(){
            this.names = [
            {ime:'Buzo', completed:false},
            {ime:'Rahmanjinov', completed:true}
        ];
        },
        remove(){
            this.names = [];
        },
        finish(index){
           if(this.names[index].completed == false){
               this.names[index].completed = true;
           }
           else if(this.names[index].completed == true){
               this.names[index].completed = false;
           }
        },
        removeAtIndex(index){
            this.names.splice(index,1);
        },

        removeAllDone(){
            let  duzina = this.names.length;
                for(var i = 0;i<this.names.length;i++){
                    if(this.names[i].completed == true){
                        this.names.splice(i,1);
                        --i;
                    }
                }
        }

    },
    computed:{
        numberNames(){
            return this.names.length;
        }
    }

});
    </script>

</body>
</html>