Reaktive Bearbeitung von Komponentendaten in Vue

Lassen Sie uns nun die Bearbeitung der Daten unserer Kindkomponenten implementieren. Zuerst erstellen wir in der Elternkomponente eine Methode zur Änderung des Benutzers anhand seiner id:

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

Erstellen wir die Komponenten in einer Schleife und übergeben ihnen als Parameter den Namen, den Nachnamen, die id und die Änderungsmethode:

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

Tragen wir das emittierte Ereignis in der Konfiguration emits der Kindkomponente ein:

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['change'],

Erstellen wir nun in der Kindkomponente eine Eigenschaft, die den Modus der Komponente festlegt, Anzeige oder Bearbeitung:

data() {
	return {
		isEdit: false,
	}
}

Erstellen wir auch Eigenschaften zur Unterstützung der Arbeit der Eingabefelder für die Bearbeitung:

data() {
	return {
		isEdit: false,
		newName: '',
		newSurn: '',
	}
}

Sorgen wir dafür, dass die Anfangswerte dieser Eigenschaften aus den Props übernommen werden:

data() {
	return {
		isEdit: false,
		newName: this.name,
		newSurn: this.surn,
	}
}

Erstellen wir eine Methode, die den Bearbeitungsmodus aktiviert:

methods: {
	edit() {
		this.isEdit = true;
	}
}

Erstellen wir eine Methode, die die bearbeiteten Daten speichert und gleichzeitig den Bearbeitungsmodus deaktiviert:

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

Erstellen wir das Template der Kindkomponente:

<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>

Implementieren Sie die Bearbeitung der Daten der Komponente Employee.