Allgemein, JavaScript / DHTML, Kurztipps

Mit Vue.js dynamisch Checkbox-Listen erstellen

WordPress Entwickler und Webdesigner

Vuejs Logo

Vue.js ist eine übersichtliche, angular.js-ähnliche JavaScript Bibliothek, die die Fokus auf die Frontendmanipulation legt. Die Daten werden (üblicherweise) über Ajax als JSON geladen und dann von der Bibliothek verarbeitet. Kombiniert man Vue.js zum Beispiel mit den Möglichkeiten der neuen Rest-API von WordPress, sind PHP-freie WordPress Themes auch nicht unmöglich.

In diesem kleinen Tipp zeige ich euch, wie man mit Vue.js eine Liste aus Checkboxen darstellt, die je nach Speicherstatus ausgewählt sind oder nicht.

Anzeige:




Was wir haben möchten:

Der Code, um eine Liste in Vue.js darzustellen, ist folgender:

Der HTML-Part:

Der Bereich v-model="check(user.active)" ruft innerhalb des erstellten Vue-Objektes die Methode check() auf. Diese müssen wir noch erstellen:

Sobald das v-model „true“ erhält, wird die checkbox als „checked“ markiert.

Durch die einfache Verknüpfung von Methoden und HTML sind mit Vue.js auch komplexere Manipulationen möglich. Mehr Informationen zu Vuejs findet ihr auf der Website.

Vue.js Webseite besuchen

Schlagworte zu diesem Artikel: , , , , , ,

Veröffentlicht von Nikolaij

Nikolaij lebt in Tokio und programmiert seit über 10 Jahren leidenschaftlich. Gegenwärtig spezialisiert er sich auf die Entwicklung von Webservices und Themes mit WordPress und Co.

Webseite:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.