Formulário para Adicionar Elementos a um Array em Vue

Vamos adicionar reativamente o texto do input ao final do array. Vamos começar a implementação. Suponha que temos um array:

App.vuedata() {
  return {
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Vamos adicionar a propriedade newItem, para suportar o funcionamento do input:

App.vuedata() {
  return {
    newItem: '',
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Vamos exibir o conteúdo do array como uma lista:

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

Agora vamos criar um input e um botão, no qual ao clicar, o texto do input será adicionado ao final da lista como um novo item:

App.vue<template>
  <input v-model="newItem">
  <button @click="addItem">add</button>
</template>

Ao clicar no botão, o método addItem será chamado, ele irá pegar o texto do input e adicioná-lo como um novo elemento no array, o que levará a uma mudança reativa na lista:

App.vuemethods: {
  addItem: function() {
    this.items.push(this.newItem);
  }
}