javascript / beginner
Snippet
Entfernen doppelter Benutzer-Tags mit JavaScript Set in Vue
Das JavaScript Set-Objekt speichert einzigartige Werte beliebigen Typs. Durch die Kombination des Spread-Operators mit einem Set können Sie ein neues Tag schnell mit einem vorhandenen reaktiven Array in Vue zusammenführen und Duplikate automatisch verwerfen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { ref } from 'vue';const tagList = ref(['javascript', 'vue', 'frontend']);function addUniqueTag(newTag) {const cleanTag = newTag.trim().toLowerCase();if (cleanTag) {const uniqueSet = new Set([...tagList.value, cleanTag]);tagList.value = Array.from(uniqueSet);}}
vue
Erklärung
1
const tagList = ref(['javascript', 'vue', 'frontend']);
Initialisiert ein reaktives Array, das die aktuelle Liste der Tag-Zeichenketten speichert.
2
const cleanTag = newTag.trim().toLowerCase();
Entfernt umgebende Leerzeichen und wandelt den eingehenden Tag für einen einheitlichen Vergleich in Kleinbuchstaben um.
3
if (cleanTag) {
Verhindert die Verarbeitung leerer Zeichenketten vor der Set-Operation.
4
const uniqueSet = new Set([...tagList.value, cleanTag]);
Fügt bestehende Tags und den neuen Tag in ein Set ein, welches Duplikate automatisch entfernt.
5
tagList.value = Array.from(uniqueSet);
Wandelt das Set wieder in ein reguläres Array um und weist es dem reaktiven ref zu.