使用 Vue prop 作为函数声明的一部分

Question

我在我的 Vue 应用程序中使用 vue-select。我创建了一个组件作为 v-select 的包装器。为了 return 只有选项数组的特定列，我使用 vue-select.

的 :reduce 道具

<template>
<span>
    <label v-if="title">{{title}}</label>
    <v-select
        :options="options"
        :label="label"
        :placeholder="placeholderText"
        :close-on-select="closeOnSelectValue"
        :disabled="isDisabled"
        :multiple="multiple"
        :value="value"
        @input="handleInput($event)"
        :loading="isLoading"
        :reduce="option=> option.val"
    ></v-select>
</span>

此代码有效，但我希望静态 val 字符串成为动态属性 returnKey。这将作为道具传递给组件。

props: {
        returnKey: {
            type: String,
            default: null,
        },
}

我应该使用什么语法来组合传递给 :reduce 的函数中的 'option' 字符串和 'returnKey' 的动态值以使其正常工作？

Answer 1

你可以试试这样的

<template>
<span>
    <label v-if="title">{{title}}</label>
    <v-select
        :options="options"
        :label="label"
        :placeholder="placeholderText"
        :close-on-select="closeOnSelectValue"
        :disabled="isDisabled"
        :multiple="multiple"
        :value="value"
        @input="handleInput($event)"
        :loading="isLoading"
        :reduce="reduceKey"
    ></v-select>
</span>
</template>

<script>
export default
{
  props: {
        returnKey: {
            type: String,
            default: null,
        },
  },
  methods:
  {
    reduceKey(option)
    {
      return option[this.returnKey] || option;
    }
  }
}

Answer 2

您可以使用括号表示法并执行 option => option[returnKey].

正如理查德所建议的那样，为了避免运行时错误，您可能需要提供某种回退，或者强制要求 returnKey 必须是必需的道具。

使用 Vue prop 作为函数声明的一部分

Use Vue prop as part of function declaration

vue.js

vue-component

reduce

vue-select