Parameterized v-for directive - vue.js

Question

I'm using v-for to produce a set of vuetify v-timeline-item with elements being customized based on values stored in a customization object:
<v-timeline-item
v-for="target in targetsList"
:key="target.uid"
:color="typesConfig[target.format].color"
:icon="target.icon"
large
fill-dot
>
I would like to pick a color from the typesConfig object based on the value of target.format.
typesConfig is a computed property that looks like this:
const typesConfig = {
doc: {
color: 'red lighten-2',
icon: 'mdi-star',
}, etc...
I'm having trouble figuring out how to grab the color value from the object and assign it to :color. I have tried all sorts of things including string literals with no luck :(
I hope the above is clear and your help would be appreciated.
thank you.

Answer 1

You said typesConfig is a computed property that looks like this: ... but that's not what a computed property looks like.
It looks like you have defined a constant outside of the Vue object.
I mocked up your component with typesConfig as a data property and the template you have works perfectly.
You would only need a computed property if you were computing from something else, say targetsList, but you intend to remove color and icon from those objects.
So, it's likely you just need a data property that is initialized from your const, something like
const typesConfig = {
doc: {
color: 'red lighten-2',
icon: 'mdi-star',
},
}
export default {
data: () => ({
targetsList: [
{ uid: 'ABC', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
{ uid: 'def', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
{ uid: 'ghi', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' }
],
typesConfig: typesConfig
})
};