Vue

by WILLIAM CORREA

HTML

<div id="app">
    <div
      v-for="contato in contatos"
      :key="contato.key"
    >
      <div>
        Nome: <input v-model="contato.nome">
      </div>
      <div>
        Tipo: <input v-model="contato.tipo">
      </div>
      <div>
        Conteúdo: <input v-model="contato.conteudo">
      </div>
      <button @click="remove(contato)">Remove</button>
      <hr>
    </div>
    <button @click="add">Add</button>
    <pre>{{ contatos }}</pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const key = () => (new Date().getTime()).toString(16)

new Vue({
  el: "#app",
  data() {
    return {
        contatos: [
          {
          	key: key(),
          	nome: 'Nome do cidadão',
            tipo: 'email',
            conteudo: '[email protected]', responsavel: null
          },
          {
          	key: key(),
           	nome: 'Nome do segundo cidadão',
            tipo: 'telefone',
            conteudo: '(54) 8888-8888',
            responsavel: 'Nome do cidadão'
          }
        ]
      }
  },
  methods: {
  	add () {
    	this.contatos.push({
      	key: key(),
      	nome: '',
        tipo: '',
        conteudo: '',
        responsavel: '',
      })
    },
    remove (contato) {
    	const index = this.contatos.findIndex(item => item.key === contato.key)
    	this.contatos.splice(index, 1)
    }
  }
})