component.html

<div id="invite-friends-component">
    <div class="row">
        <div class="col-md-8"><h3>Invite Friends</h3></div>
        <div class="col-sm-4 col-xs-6">
            <button class="btn btn-social btn-facebook btn-block"><i class="fa fa-facebook"></i>Insert contact using Facebook</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form action="{{ inviteFriendsActionUrl }}" method="POST">
                <div class="row micit-row-invite-friends" v-for="invitationRow in invitationRows">
                    <div class="col-md-5 col-xs-5">
                        <div class="form-group">
                            <label class="sr-only" for="email-address-${$index}">Email address</label>
                            <input type="email" class="form-control" name="emails[]" id="email-address-${$index}" placeholder="Email" required>
                        </div>
                    </div>
                    <div class="col-md-5 col-xs-4">
                        <input type="text" class="form-control" name="names[]" placeholder="Name" required>
                    </div>
                    <div class="col-md-2 col-xs-3" v-if="isLastRow($index)">
                        <button v-on:click.prevent="addNewRow" class="btn btn-link btn-sm micit-btn-invite-friends-row"><i class="fa fa-2x fa-plus-circle"></i></button>
                        <button v-on:click.prevent="removeRow($index)" class="btn btn-link btn-sm micit-btn-invite-friends-row"><i class="fa fa-2x fa-minus-circle"></i></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <input type="submit" class="btn btn-primary " value="Send Invitations">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% block javascripts %}
    <script>
        $(document).ready(function() {
            /**
             * config stuff
             * we have to change the delimiters so twig tags don't clash
             */
            Vue.config.debug = true;
            Vue.config.delimiters = ["${", "}"];
            Vue.config.unsafeDelimiters = ['{!!', '!!}'];

            var inviteFriends = new Vue({
                el: '#invite-friends-component',
                data: {
                    invitationRows: [
                        {
                            'name': '',
                            'email': ''
                        }
                    ]
                },
                computed: {
                    'numberOfRows': function() {
                        return this.invitationRows.length;
                    }
                },
                methods: {
                    'addNewRow': function() {
                        this.invitationRows.push({
                            'name': '',
                            'email': ''
                        });
                    },
                    'removeRow': function(index) {
                        if (this.invitationRows.length > 1) {
                            this.invitationRows.splice(index, 1);
                        }
                    },
                    'isLastRow': function(index) {
                        return index+1 >= this.numberOfRows;
                    }
                }
            });
        });
        //# sourceURL=invite-friends.js

    </script>
{% endblock %}