Bug: duplicate keys in v-for on vulnerability details page
Summary
There is a duplicate key issue in the vulnerability details component:
[Vue warn]: Duplicate keys detected: 'https://security.example.com/0'. This may cause an update error.
found in
---> <VulnerabilityDetails> at ee/app/assets/javascripts/vulnerabilities/components/details.vue
<Vulnerability> at ee/app/assets/javascripts/vulnerabilities/components/vulnerability.vue
<Root>
While line 222 is for vulnerability.identifiers
, the other usages of v-for
in the same file also have the potential to have duplicate keys, and should be fixed as well.
What is the current bug behavior?
Warning is shown in the console.
What is the expected correct behavior?
No warning is shown.
Possible fixes
Replace the keys with something more unique. Doing something simple like using the index:
<div v-for="(thing, index) in things" :key="`${thing}:${index}`">
should be fine because the data is static and will never be updated, we just need a key because eslint will throw an error otherwise.