JSFiddle - React, Tailwind, and code Playground

by tbergeron

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <small>Double click on text to edit / enter to submit</small>
                <div id="pages">

                    <ul class="list-group">
                        <li v-repeat="page: pages" class="list-group-item">
                            <span v-on="dblclick: editPage(page)">
                                {{ page.title }}
                            </span>
                            <span class="pull-right alert-danger" v-on="click: removePage(page)">Delete</span>
                        </li>
                    </ul>

                    <hr/>

                    <form v-on="submit: addPage">
                        <div class="form-group">
                            <input v-model="newPage" v-el="newPage" class="form-control" placeholder="New page" type="text"/>
                        </div>
                        <button class="btn btn-primary">Add page</button>
                    </form>

                    <hr/>

                    <pre>{{ $data | json }}</pre>

                </div>
            </div>
        </div>
    </div>

JavaScript

new Vue({
    el: '#pages',

    data: {
        pages: [
            { title: 'About', body: '<p>cool story bro</p>' }
        ],
        newPage: ''
    },

    methods: {
        addPage: function(e) {
            e.preventDefault();

            this.pages.push({
                title: this.newPage,
                body: 'nothing here for now'
            });

            this.newPage = '';
        },

        editPage: function(page) {
            this.removePage(page);
            this.newPage = page.title;
            this.$$.newPage.focus();
        },

        removePage: function(page) {
            this.pages.$remove(page);
        }

    }
});