JSFiddle - React, Tailwind, and code Playground

by keligijus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(item, index) in items">
      <input :id="'item-'+index" type="text" style="width:80%;">
    </li>
    <li><button @click="items.unshift('')">
    Add item to the top
    </button></li>
  </ul>
  <p>Adding a new item to the beginning of the array should move the input with some text down, however it stays in the same position.</p>
  <p>This is a problem as the text is not staying in the same input, but actually is moved up by one row.</p>
   <p>Please click the button to see how it works.</p>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data() {
    return {
    	items: ['1', '2', '3']
    }
  },
  mounted () {
  	document.getElementById('item-1').focus()
    document.getElementById('item-1').value = 'some text'
  }
})