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

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

const tagList = ref(['javascript', 'vue', 'frontend']);

Initialisiert ein reaktives Array, das die aktuelle Liste der Tag-Zeichenketten speichert.

const cleanTag = newTag.trim().toLowerCase();

Entfernt umgebende Leerzeichen und wandelt den eingehenden Tag für einen einheitlichen Vergleich in Kleinbuchstaben um.

if (cleanTag) {

Verhindert die Verarbeitung leerer Zeichenketten vor der Set-Operation.

const uniqueSet = new Set([...tagList.value, cleanTag]);

Fügt bestehende Tags und den neuen Tag in ein Set ein, welches Duplikate automatisch entfernt.

tagList.value = Array.from(uniqueSet);

Wandelt das Set wieder in ein reguläres Array um und weist es dem reaktiven ref zu.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Entfernen doppelter Benutzer-Tags mit JavaScript Set in Vue

Verwandt