Set Javascript Key Name from Dynamic Prop in Vue 2

Question

I've created my own SelectMenu Vue component that wraps the vue-select package select menu component so that I can get a more streamlined ui flow.

My reusable component looks like so:

<v-select 
  :appendToBody="append"  
  filterable 
  :multiple="multiple"
  :label="label" 
  :placeholder="placeholder" 
  :options="options" 
  :autocomplete="autocomplete" 
  :reduce="option => option.id" 
  @input="selected" 
  v-model="model" />

This works perfectly except when the options key needs to be something other than id

append multiple label placeholder options are all passed into the component as props and I'd like to pass in the option key to use as well.

:reduce="option => option.{passed in key}"

I set a prop called reducer for lack of a better name:

reducer: {
  type: String,
  default: 'id'
}

I tried concatenating it:

:reduce="option => `option.${reducer}`"

But of course this produces a string of "option.id" or whatever the reducer prop is.

How can I set this so it'll be interpreted as javascript?

Emma Zn · Accepted Answer · 2022-05-27 13:57:19Z

1

Have you try using bracket notation to get an object's value by a variable key ? https://bobbyhadz.com/blog/javascript-get-object-value-by-variable-key#:~:text=Use%20bracket%20notation%20to%20get,get%20the%20corresponding%20value%20back.&text=Copied!

:reduce="option => option[reducer]"

answered May 27, 2022 at 13:57

Emma Zn

1731 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

secondman Over a year ago

Brilliant .. works a charm. I didn't know you could use an object this way. Much appreciated.

Collectives™ on Stack Overflow

Set Javascript Key Name from Dynamic Prop in Vue 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related