DJE-051
Error
Template
Duplicate keys in sibling elements
Error message
WARNING: Duplicate key in children — earlier element invisible to diff
Two or more sibling elements share the same `data-key` value. The VDOM keyed diff algorithm uses keys to match old and new elements — duplicates cause the earlier element to be invisible, leading to incorrect patches (wrong elements updated or removed).
keys
template
vdom
Affected versions: >=0.2.0
Solution
Before (problematic)
{% for item in items %}
<div data-key="{{ item.category }}"> <!-- Duplicates! -->
{{ item.name }}
</div>
{% endfor %}
After (fixed)
{% for item in items %}
<div data-key="{{ item.id }}"> <!-- Unique per item -->
{{ item.name }}
</div>
{% endfor %}