Modifica Reattiva dei Dati del Componente in Vue

Ora implementiamo la modifica dei dati dei nostri componenti figli. Per iniziare, nel componente genitore creiamo un metodo per modificare l'utente in base al suo id:

App.vuemethods: {
  change(id, name, surn) {
    this.users = this.users.map((user) => {
      if (user.id === id) {
        user.name = name;
        user.surn = surn;
      }
      return user;
    });
  }
}

Creiamo i componenti in un ciclo, passando loro come parametri nome, cognome, id e il metodo per la modifica:

App.vue<template>
  <User
    v-for   ="user in users"
    
    :id     ="user.id"
    :name   ="user.name"
    :surn   ="user.surn"
    :key    ="user.id"
    @change="change"
  />
</template>

Registriamo l'evento emesso nella configurazione emits del componente figlio:

components/User.vueprops: {
  id:     Number,
  name:   String,
  surn:   String,
},
emits: ['change'],

Ora nel componente figlio creiamo una proprietà che imposterà la modalità del componente, visualizzazione o modifica:

components/User.vuedata() {
  return {
    isEdit: false,
  }
}

Creiamo anche delle proprietà per supportare il funzionamento degli input per la modifica:

components/User.vuedata() {
  return {
    isEdit: false,
    newName: '',
    newSurn: '',
  }
}

Facciamo in modo che i valori iniziali di queste proprietà vengano presi dalle props:

components/User.vuedata() {
  return {
    isEdit: false,
    newName: this.name,
    newSurn: this.surn,
  }
}

Creiamo un metodo che attiverà la modalità di modifica:

components/User.vuemethods: {
  edit() {
    this.isEdit = true;
  }
}

Creiamo un metodo che salverà i dati modificati, disattivando contemporaneamente la modalità di modifica:

components/User.vuemethods: {
  save() {
    this.isEdit = false;
    this.$emit('change', this.id, this.newName, this.newSurn);
  }
}

Creiamo il template del componente figlio:

components/User.vue<template>
  <template v-if="!isEdit">
    {{ name }}
    {{ surn }}
    <button @click="edit">
      edit
    </button>
  </template>
  <template v-else>
    <input v-model="newName">
    <input v-model="newSurn">
    <button @click="save">
      save
    </button>
  </template>
</template>