Componentă pentru adăugarea datelor în Vue

Să implementăm acum un formular pentru adăugarea de utilizatori noi. Vom face acest formular sub forma unei componente separate. Să începem implementarea. Pentru început, în componenta părinte vom crea o metodă pentru adăugarea utilizatorului:

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

În reprezentarea componentei părinte vom conecta componenta copil:

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

În componenta copil vom face proprietăți pentru controlul inputurilor:

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

În componenta copil vom face o metodă pentru salvarea datelor:

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

Să facem reprezentările componentei copil:

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