Компонент за додавање на податоци во Vue

Ајде сега да ја имплементираме формата за додавање на нови корисници. Оваа форма ќе ја направиме како посебна компонента. Да почнеме со имплементацијата. За почеток во родителската компонента направете метод за додавање на корисник:

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

Во претставувањето на родителската компонента вклучете ја детската:

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

Во детската компонента направете својства за контрола на инпутите:

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

Во детската компонента направете метод за зачувување на податоците:

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

Направете ги претставувањата на детската компонента:

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