从 Vue 2 中的动态属性设置 Javascript 键名

Question

我已经创建了自己的 SelectMenu Vue 组件，它包装了 vue-select 包 select 菜单组件，这样我可以获得更精简的 ui 流程。

我的可重用组件如下所示：

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

这非常有效，除非选项键需要是 id

以外的其他内容

append multiple label placeholder options 都作为道具传递到组件中，我想传递 option 键也可以使用。

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

我设置了一个名为 reducer 的道具，因为没有更好的名字：

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

我试过连接它：

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

但是当然这会产生一个字符串“option.id”或者任何 reducer 属性。

我如何设置它以便将其解释为 javascript？

Answer 1

您是否尝试过使用括号表示法通过变量键获取对象的值？ 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]"

从 Vue 2 中的动态属性设置 Javascript 键名

Set Javascript Key Name from Dynamic Prop in Vue 2

javascript

vue.js