javascript / beginner
Snippet
Aktualisieren reaktiver Arrays mit dem Spread-Operator
Svelte verlässt sich auf Neuzuweisungen, um Reaktivität auszulösen. Die Verwendung des Spread-Operators zur Erstellung einer neuen Array-Referenz stellt sicher, dass die Benutzeroberfläche beim Hinzufügen von Elementen automatisch aktualisiert wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>let fruits = ['Apple', 'Banana'];function addFruit(newFruit) {fruits = [...fruits, newFruit];}</script><button on:click={() => addFruit('Orange')}>Add Orange</button><ul>{#each fruits as fruit}<li>{fruit}</li>{/each}</ul>
svelte
Erklärung
1
fruits = [...fruits, newFruit];
Erstellt ein neues Array mit allen vorhandenen Elementen plus dem neuen Element und weist es neu zu, um Reaktivität auszulösen.
2
{#each fruits as fruit}
Iteriert über das aktualisierte reaktive Array, um jedes Listenelement zu rendern.