Bei der Arbeit mit VueJS in Kombination mit jQuery kommt es häufig zu dem Problem, dass VueJS das DOM oder sogar das data-Attribut eines Elementes ändert, aber jQuery noch per jQuery.data() auf alte Daten zugreift.
Hintergrund: Beim Initialisieren der Elemente cached jQuery die data-*-Attribute und speichert sie in einer internen Variable, um später schneller darauf zugreifen zu können. Eine Änderung der data-*-Attribute über VueJS – oder bereits eine Änderung der Reihenfolge der Elemente im DOM – führt zu einer falschen Zuordnung zwischen Element und dem data-Cache von jQuery.
Dieses kleine Plugin löst das Problem: Nach einer Änderung des DOM über VueJS kann einfach $('.element').rebuildData(); aufgerufen werden, um alle data-Attribute des Elementes und rekursiv aller Unterknoten erneut zu parsen und in jQuery.data() zu speichern.
Für Suchmaschinen: rebuild data-attribute with jQuery, delete data-Cache jQuery, refresh and reload data-attribute in jQuery. Clear data-cache and reinitialize data-attributes in jQuery. Problem VueJS data-attribute parsing with jQuery. Force reparsing the data-attributes in jQuery when DOM is dynamically changed. Disable the data-Cache in jQuery.
(function () {
$.fn.extend({
/**
* jQuery.data() liefert ein falsches Ergebnis in Verbindung mit VueJS:
* Werden Elemente dynamisch im DOM verändert, referenziert der jQuery.data()-Cache
* evtl. auf Elemente, die ersetzt wurden.
*
* Wurde ein [data-]-Attribut einmal über jQuery.fn.data() eingelesen,
* liefert jQuery immer den gecachten Wert – auch wenn sich das Tag-Attribut
* verändert hat, z.B. data-poi-uid="10" in data-poi-uid="33" geändert wurde.
*/
'rebuildData': function () {
return this.each(function () {
$(this).add($(this).find('*')).each(function () {
var i, name, data, elem = this,
attrs = elem && elem.attributes;
if (elem.nodeType === 1) {
i = attrs.length;
var obj = {};
while (i--) {
if (attrs[i]) {
name = attrs[i].name;
if (name.indexOf("data-") === 0) {
name = jQuery.camelCase(name.slice(5));
var val = attrs[i].value;
if ($.isNumeric(val)) val *= 1;
obj[name] = val;
}
}
}
$(this).data(obj);
}
});
});
}
});
})(jQuery);