39 lines
1.4 KiB
Plaintext
39 lines
1.4 KiB
Plaintext
<app>
|
|
<h1>Personnages des Simpsons</h1>
|
|
<div class="controls">
|
|
<button onclick="{ () => sort('prenom') }">Trier par Prénom</button>
|
|
<button onclick="{ () => sort('age') }">Trier par Âge</button>
|
|
</div>
|
|
|
|
<my-list personnages="{ state.personnages }" onselect="{ selectCharacter }"></my-list>
|
|
|
|
<div if="{ state.selectedCharacter }" class="selected-char">
|
|
<h3>Personnage sélectionné :</h3>
|
|
<p><strong>Nom :</strong> { state.selectedCharacter.prenom } { state.selectedCharacter.nom }</p>
|
|
<p><strong>Âge :</strong> { state.selectedCharacter.age !== null ? state.selectedCharacter.age : 'inconnu' }</p>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
onMounted(props) {
|
|
this.update({
|
|
personnages: [...props.personnages],
|
|
selectedCharacter: null
|
|
});
|
|
},
|
|
|
|
sort(key) {
|
|
const sorted = [...this.state.personnages].sort((a, b) => {
|
|
if (a[key] === null) return 1;
|
|
if (b[key] === null) return -1;
|
|
return a[key] > b[key] ? 1 : -1;
|
|
});
|
|
this.update({ personnages: sorted });
|
|
},
|
|
|
|
selectCharacter(character) {
|
|
this.update({ selectedCharacter: character });
|
|
}
|
|
}
|
|
</script>
|
|
</app> |