javascript - 允许 Vue 2 Select Component 接受一个数组来选择选项

Question

我正在尝试创建一个可重复使用的 Select 组件，该组件将与作为选项传递给它的任何数组一起使用。

如果数组中的对象属性共享组件中绑定(bind)的相同名称，我可以正常工作，但如果您传递具有不同属性/属性名称的对象数组，正如预期的那样，选项将不会呈现。如何在组件上分配我想要的对象属性作为选项值以及我想要作为选项标签/名称的对象属性？

FormSelect.vue/组件

<template>
   <select :id="id" v-model="selected">     
      <option v-if="options.length > 0" value="">Please Select</option>
      <option
        v-if="options.length > 0"
        v-for="(option, index) in options"
        :key="index"
        :selected="selected"
        :value="option.value"
        v-text="option.name"
       />  

    </select>
</template>

<script>
props: {
 value: {    
      type: [Array, String, Number, Object],
      default: null
    },
 options: {
      type: Array,
      default: () => []
    }
},

computed: {
    selected: {
      get() {
        return this.value ? this.value : "";
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  }
</script>

Parent.vue/父级

<form-select
   id="gender"
   label="Gender"
   :options="genderOptions"
   @input="handleEdit(deep(profile))"
   v-model="user.gender"
/>

这个有效:

genderOptions: [
  { name: "Male", value: "MALE" },
  { name: "Female", value: "FEMALE" }
],

这不会(注意 obj 键名):

genderOptions: [
    { id: "Male", gender: "MALE" },
    { id: "Female", gender: "FEMALE" }
 ],

所以我认为需要有一种方法来告诉组件我想将哪些属性用作选项值和标签。像这样的东西，但它也需要在组件端处理:

<form-select
   id="gender"
   label="Gender"
   :options="genderOptions"

   optionVal="gender"
   optionName="id"

   @input="handleEdit(deep(profile))"
   v-model="user.gender"
/>

Answer 1

您缺少向组件添加 optionVal 和 optionName Prop 并使用它们，我建议采用以下解决方案

<script>
props: {
 value: {    
      type: [Array, String, Number, Object],
      default: null
    },
 options: {
      type: Array,
      default: () => []
    },
optionVal:{
    type:String,
    default: 'value'
    },
optionName:{
    type:String,
    default: 'name'
    }
},

computed: {
    selected: {
      get() {
        return this.value ? this.value : "";
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  }
</script>

 <select :id="id" v-model="selected">     
      <option v-if="options.length > 0" value="">Please Select</option>
      <option
        v-if="options.length > 0"
        v-for="(option, index) in options"
        :key="index"
        :selected="selected"
        :value="option[optionVal]"
    v-text="option[optionName]"
       />  

    </select>