Vue can't render curly brackets value-CodePudding

My issue is simple but kinda tricky.

I'm inside a v-for, named filter, and I'd like to display thing like item.properties.*value* which is the :items I passed to vuetify autocomplete , and the value has to different in each loop, because the infos to desired are not the same. In other words, I'd like to filter displayed items depending on the object I am.

Notice that the properties is an object with multiples props and I want to display only 1 on the prop in every loop. I did not made any v-forfor this object containing multiples props

The name of the prop I want to show as list on my autocomplete is determined by a variable called "label" that I passed as props in my v-for and therefore, in my looped component which looks like this label : 'filters.mission' (for example, mission)

(I have a traduction file so that's the reason we have a 'filters.mission' here because its all translated, for all the props)

Here is a simple exemple :

    // imported array from data I want to display, binded as :items="data"
    [
    //..stuff
      properties : {
      "mission": foo,
      "driver": bar,
      "name": baz,
    },
    //..stuff
      properties : {
      "mission": foo2,
      "driver": bar2,
      "name": baz2,
    },
],

In my looped component, I binded my :items="items" and I want to display props like item.properties.mission when my item.label = filters.mission, and so on

But here is the thing :

WORKING

 {{ item.properties.mission}}  OUTPUT : 'foo', 'foo2'

NOT WORKING

 {{ item.properties   label.replace('filters', '') }}

OUTPOUT : [object Object].mission

I tried to parse label.replace('filters', '') but it made me an error. I also tried to stringify... Should I write a v-for for my :item object and filter the content ?

 item.properties.filter(
              (prop) => Object.keys(prop) ===  label.replace('filters.', ''))
            )

If so, where should I filter my object ?

Thanks in advance for anyone answering this !

CodePudding user response：

Because item.properties is an object, you can access mission also using item.properties['mission']. In your case you can use

{{ item.properties[label.replace('filters', '')] }}