Monthly Archives: Mai 2021
Vue – Konstanten definieren
Konstanten kann man in Vue einfach im Created Hook definieren. Generell sollte man sich das Arbeiten mit Konstanten angewöhnen. if(UserTypeId == 7) {…} stellt den Entwickler vor die Frage, was an diesen UserType nun so besonders ist. Besser: if(UserTypeId == USERTYPE_GUEST) . So weiß jeder, die folgende Logik betrifft den Gastbenutzer
|
1 2 3 |
created() { this.USERTYPE_GUEST = 7; }, |
0 
Vue – Directive
Mal angenommen man möchte alle Felder auf einer Seite deaktivieren. Man könnte input für input durchgehen und mit :disabled=“isEditable“ das Feld deaktivieren. Oder man schreibt eine Custom Directive, die diese Logik abbildet: https://vuejs.org/v2/guide/custom-directive.html Möchte man das global haben:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Vue.directive("disableall", { bind: function (el, binding) { if ((!binding.hasOwnProperty('value')) || binding.value) { const tags = ["input", "button", "textarea", "select"]; tags.forEach(tagName => { const nodes = el.getElementsByTagName(tagName); for (let i = 0; i < nodes.length; i++) { nodes[i].disabled = true; nodes[i].tabIndex = -1; } }); } } }); |
Oder per Instanz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
directives: { disableall: { // directive definition bind: function (el, binding) { if ((!binding.hasOwnProperty('value')) || binding.value) { const tags = ["input", "button", "textarea", "select"]; tags.forEach(tagName => { const nodes = el.getElementsByTagName(tagName); for (let i = 0; i < nodes.length; i++) { nodes[i].disabled = true; nodes[i].tabIndex = -1; } }); } } } } |
Eingebunden wird das nun mit.
|
1 2 3 |
<div v-disableall="!isEditable"> ... </div> |
oder
|
1 2 3 |
<div v-disableall="true"> ... </div> |
oder ohne Bedingung
|
1 2 3 |
<div v-disableall> ... </div> |
[…]
Login