vue duplicate keys detected
<!-- Vue Duplicate Keys Detected :
When using multiple components in 1 vue page.
You may run into a duplicate key error. The solution I used
was to append a text identifier to the the key to remove the duplicates.
-->
<!---- this is where the dupe error comes from -->
<!--------- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<div :key="update_key('text_identifier_1',key1)"> text </div>
<div :key="update_key('text_identifier_2',key2)"> text </div>
<script>
data() {
return {
// this is where the dupe error comes from
// ↓↓↓↓ (Both keys are zero)
key1: 0,
key2: 0,
};
},
methods: {
// this is how we fix it (The "prefix" make it unique)
// ↓↓↓↓↓↓
key_update(prefix,key){
return prefix+"_"+key;
}
}
</script>