javascript / beginner
Snippet
Elemente an ein reaktives Array anhängen
In Vue 3 mit der Composition API lösen in `ref` verpackte Arrays automatische Reaktivitäts-Updates aus, wenn sie mit Standard-JavaScript-Array-Methoden wie `push()` modifiziert werden. Das Bereinigen von Zeichenketten vor dem Hinzufügen verhindert, dass leere Einträge den Anwendungszustand verunreinigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { ref } from 'vue';const taskList = ref(['Buy groceries', 'Read documentation']);function addNewTask(taskName) {if (taskName && taskName.trim() !== '') {taskList.value.push(taskName.trim());}}
vue
Erklärung
1
const taskList = ref(['Buy groceries', 'Read documentation']);
Initialisiert eine reaktive Referenz mit einem Array von Zeichenketten.
2
if (taskName && taskName.trim() !== '') {
Stellt sicher, dass der Parameter nach dem Entfernen von Leerzeichen nicht leer ist.
3
taskList.value.push(taskName.trim());
Fügt den bereinigten Text über die .value-Eigenschaft an das reaktive Array an.