JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
<button @click="rotate">rotate</button>
<my-component v-for="item in items" :key="item.id"></my-component>
</div>
CSS
div {
padding: 5px;
}
Babel + JSX
Vue.component('my-component', {
template: `<div><input :value="value" /></div>`,
data() {
return {
value: Math.random() * 100 | 0
}
}
});
new Vue({
el: '#app',
data: {
items: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 }
],
},
methods: {
rotate() {
this.items = this.items.slice(1).concat(this.items[0])
}
}
});