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>