JSFiddle - React, Tailwind, and code Playground

by Denis Karabaza

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<ul>
    <li v-repeat="I in items">
        {{I.name}}-{{$index+1}}
        <a href="#" v-on="click: onCopy($index, $event)">copy</a>
    </li>
    <li v-on="click: onAdd"> click me </li>
</ul>

<pre>{{items | json}}</pre>

CSS

li{
    display: block;
    background-color: #ccc;
    float: left;
    width: 90px;
    height: 50px;
    margin-right: 5px;
}

pre{
    clear:both;
}

JavaScript

Vue.config.debug = true;



new Vue({
    el: 'body',
    data: {
        items: []
    },
    methods: {
        onAdd: function () {
            this.items.push({name: 'testBlock'})
        },
        onCopy: function (idx, e) {
            e.preventDefault();
            var item = Vue.util.extend({}, this.items[idx]);
            this.items.splice(idx, 0, item);
        }
    }
})