Inline edit + AJAX + VueJS using nodum

ajax_get.twig

{% trim %}

    {{ mongo.find({ deleted : { '$exists' : false } })|json_encode }}

{% endtrim %}

ajax_update.twig

{% trim %}

    {% if param.post._id is not empty %}
    
        {% set delete = {} %}
        
        {% if param.get.delete %}
            {% set delete = { deleted: true } %}
        {% endif %}
        
        {% do mongo.update({ _id : param.post._id }, {
            name : param.post.name,
            age  : param.post.age,
        }|merge(delete)) %}    
        {{ param.post|json_encode }}
        
    {% else %}
    
        {% set newId = mongo.set({
            name : param.post.name,
            age  : param.post.age,
        }) %}
        {{ param.post|merge({ _id : newId })|json_encode }}
        
    {% endif %}

{% endtrim %}

page.css

.text-grijs {
    color: #ccc;
}

[v-cloak] {
    display: none;
}

page.js

var $vue = new Vue({
    el : "#vue",
    data : {
        loading   : true,
        lines     : [],
        developer : "Wietse",
        output    : ''
    },
    ready: function(){
        var _this = this
        $.post($("base").attr('href') + 'json/get-persons', {}, function(d){
            _this.lines   = d
            _this.loading = false
        }, 'json');
    },
    methods : {   
        addPerson: function(){
            this.lines.push({
                _id  : '',
                name : '',
                age  : '',
                edit : true
            })
            Vue.nextTick(function(){
                $("input.name:last").focus();
            })
        },
        removePerson: function(k){
            $.post($("base").attr('href') + 'json/save-person?delete=true', this.lines[k], function(d){}, 'json');
            this.lines.splice(k,1)
        },
        editPerson: function(k){
            this.lines[k].edit = true
        },
        serialize : function(){
            this.output = JSON.stringify(this.lines)
        },
        savePerson : function(k){
            this.lines[k].edit = false    
            // Doe hier iets naar de database
            var _this = this
            $.post($("base").attr('href') + 'json/save-person', this.lines[k], function(d){
                if(d._id){
                    _this.lines[k]._id = d._id
                }
            }, 'json');
        }
    },
    watch : {
        
    }
})

page.twig

<h1>Inline edit</h1>

<div id="vue">

    <div class="alert alert-blauw text-center" v-if="loading">
        <i class="fa fa-cog fa-spin"></i>We zijn aan het laden
    </div>

    <div v-if="!loading" v-cloak>
    
        ${ developer }

        <hr/>

        <table class="table table-condensed table-striped table-hover">
            <tbody>
                <tr v-for="(k,v) in lines">
                    <td>
                        <small>
                            ${ v._id ? v._id : 'NIEUW' }
                        </small>
                    </td>
                    <td>
                        <div v-if="!v.edit">
                            <span v-if="v.name">Naam: </span> <b>${ v.name }</b>
                            <span v-if="!v.name" class="text-grijs">Geen naam opgegeven</span>
                        </div>
                        <div v-if="v.edit">
                            <input class="form-control name" v-on:keydown.enter="savePerson(k)" v-model="v.name" placeholder="Geef de naam op"/>
                        </div>
                    </td>
                    <td>
                        <div v-if="!v.edit">
                            <span v-if="v.age">Age: </span> <b>${ v.age }</b>
                            <span v-if="!v.age" class="text-grijs">Geen leeftijd opgegeven</span>
                        </div>
                        <div v-if="v.edit">
                            <input class="form-control" v-on:keydown.enter="savePerson(k)" v-model="v.age" placeholder="Geef de leeftijd op"/>
                        </div>
                    </td>
                    <td>
                        <div v-if="!v.edit">
                            <a class="btn btn-xs btn-blauw" @click="editPerson(k)"><i class="fa fa-pencil"></i>Wijzig</a>
                            <a class="btn btn-xs btn-rood" @click="removePerson(k)"><i class="fa fa-times"></i>Verwijder</a>
                        </div>
                        <div v-if="v.edit">
                            <a class="btn btn-xs btn-groen" @click="savePerson(k)"><i class="fa fa-save"></i>Opslaan</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <button class="btn btn-xs btn-groen" @click="addPerson()"><i class="fa fa-plus"></i>Toevoegen</button>
        <button class="btn btn-xs btn-donkerblauw" @click="serialize()"><i class="fa fa-plus"></i>Serialize</button>

        <hr />

        <textarea class="form-control">${ output }</textarea>
        
    </div>
    
</div>