vue.js - 使用 Vue prop 作为函数声明的一部分

Question

我在我的 Vue 应用程序中使用 vue-select。我创建了一个组件作为 v-select 的包装器。为了只返回选项数组的特定列，我使用了 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字符串作为动态 prop returnKey。这将作为道具传递给组件。

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

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

Answer 1

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

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

Answer 2

你可以试试这样的

<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;
    }
  }
}