允许 Vue2 Select 组件接受 select 选项的任何数组

Question

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

如果数组中的 Object 属性共享组件中绑定的相同名称，但如果您传递具有不同 property/attribute 的 object 数组，我可以正常工作名称，正如预期的那样，选项将不会呈现。如何在 object 属性组件上分配我想要的选项值和我想要的选项 label/name?

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 / Parent

<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 道具并使用它们，我建议采用以下解决方案

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

允许 Vue2 Select 组件接受 select 选项的任何数组

Allow Vue2 Select Component to take in any array for select options

javascript

arrays

html-select

object

vue.js