Komponen untuk Menambahkan Data di Vue

Sekarang mari kita implementasikan formulir untuk menambahkan pengguna baru. Kita akan membuat formulir ini dalam bentuk komponen terpisah. Mari kita mulai implementasinya. Pertama, di komponen induk, buat metode untuk menambahkan pengguna:

App.vuemethods: {
  add(name, surn) {
    let id = this.users.length + 1;
    
    this.users.push({
      id,
      name,
      surn
    });
  }
}

Di tampilan komponen induk, sambungkan komponen anak:

App.vue<template>
  <UserForm @add="add" />
</template>

Di komponen anak, buat properti untuk mengontrol input:

components/UserForm.vuedata() {
  return {
    newName: '',
    newSurn: '',
  }
}

Di komponen anak, buat metode untuk menyimpan data:

components/UserForm.vuemethods: {
  save() {
    this.$emit('add', this.newName, this.newSurn);
  }
}

Buat tampilan komponen anak:

components/UserForm.vue<template>
  <input v-model="newName">
  <input v-model="newSurn">
  
  <button @click="save">
    save
  </button>
</template>