JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="body"></div>


<!--

invalid $refs.items index after array.unshift

-->

CSS

.bold {
    font-weight: bold;
}

JavaScript

var app = new Vue({
    template: `
	<div>
		<button @click="push">push new</button>
        <button @click="unshift">unshift new</button>
		<input type="text" v-model="selectedIndex"/> <button @click="setBold">set bold</button>
		<list-item 
			v-for="(item, index) of array" 
			:item="item" 
			:key="item.id" 
			:index="index"
			ref="items"></list-item>
	</div>
	`,
    data: function() {
        return {
            autoinc: 0,
            selectedIndex: 0,
            array: []
        };
    },
    created: function() {
        for (var i = 0; i < 5; i++) {
            this.array.push(this.getNew());
        }
    },

    components: {
        ListItem: {
            props: ["item", "index"],
            data: function() {
                return {
                    bold: false
                }
            },
            template: `
			<div :class="{'bold': bold}">
				{{index}}: id = {{item.id}}, title = {{item.title}}
			</div>`,
            methods: {
                makeBold: function() {
                    this.bold = true;
                }
            }
        }
    },

    methods: {
        getNew: function() {

            var i = this.autoinc;

            var r = {
                id: 'abc_'+ i,
                title: i
            };

            this.autoinc++;

            return r;
        },
        push: function() {
            this.array.push(this.getNew());
        },
        unshift: function() {
            this.array.unshift(this.getNew());
        },
        setBold: function() {
            this.$refs.items[Number(this.selectedIndex)].makeBold();
        }
    }
});

app.$mount('#body');