:Key on v-for to rerender a row in the list || composite values as :key rather than index

Question

Recently, I came across an issue, to fix which i need to give a Unique value for :key in my v-for. But the problem is that i don't have a unique value .and giving the index as :key does not solve my problem. My Array for v-for is a list of objects, with an object being

{sourceValue:"1",targetValue:"2",assigned:true}

And my unique value will be combination of sourceValue and targetValue... So how should i define the :key on the v-for ? Is :key="cfg.sourceValue+cfg.targetValue" Okay? how can i verify the key value on DOM?

 v-for="(cfg, idCfg) in $store.state.configurations" :config="cfg" :key="idCfg"

Answer 1

Having the two values concatenated by + really worked for me.

<config-record v-for="(cfg, idCfg) in $store.state.configurations" :config="cfg" :key="cfg.sourceValue+cfg.targetValue"></config-record>

I have verified it in Vue Dev tools to see that the :key value is infact unique and concatenated values of both sourceVal and targetVal.

$store.state.configurations = [ {sourceValue:"TestDivya",targetValue:"3",assigned:true},{sourceValue:"TestDivya1",targetValue:"test",assigned:true},{sourceValue:"DEBUG_LOGGING",targetValue:"ENABLED",assigned:true} ]