JSFiddle - React, Tailwind, and code Playground

by Gzuz

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
 <input type="text" placeholder="Digite seu nome" v-model.lazy="name">
 <button @click="add">Add</button>
 
  <table border="1">
  
    <thead>
      <tr>
        <td>Index</td>
        <td>Nome</td>
        <td>Ação</td>
      </tr>
    </thead>
    
    <tbody>
      <template v-for="(name, index) in listNames">
        <tr>
          <td> {{ index }} </td>
          <td> {{ name }} </td>
          <td>
            <button @click="remove(index)">Remover</button>
          </td>
        <tr>
      </template>
      
    </tbody>
    
  </table>
 
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	name: '',
    listNames: []
  },
  methods: {
  	add() {    	
    	this.listNames.unshift(this.name)
      this.name = ''
    },
    remove(id) {
    	this.listNames.splice(id, 1)
    }
  }
})