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.
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.