Javascript 允许Vue2 Select组件接收Select选项的任何阵列

我正在尝试创建一个可重用的Select组件，它可以处理作为选项传递给它的任何数组

如果数组中的对象属性共享组件中绑定的相同名称，但如预期的那样，如果传递具有不同属性/属性名称的对象数组，则选项将不会呈现。如何在组件上指定希望作为选项值的对象特性和希望作为选项标签/名称的对象特性

FormSelect.vue/Component

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

这不会（注意obj键名称）：

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

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

因此，我认为需要有一种方法来告诉组件我想使用哪些属性作为选项值和标签。类似于此，但它还需要在组件端设置句柄：

---

您缺少将

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>

道具：{
值：{
类型：[数组、字符串、数字、对象]，
默认值：null
},
选项：{
类型：数组，
默认值：（）=>[]
},
选择值：{
类型：字符串，
默认值：“值”
},
选项名称：{
类型：字符串，
默认值：“名称”
}
},
计算：{
选定：{
得到（）{
返回this.value？this.value:“”；
},
集合（v）{
这是.$emit（“输入”，v）；
}
}
}

请选择

Wow。。真管用！（：value=“option[optionVal]”）。非常感谢。我肯定是想得太多了。您能否解释一下，当选项具有正确的obj键时，它如何在不命名optionVal和optionName的情况下仍然工作？我们有两种方法通过以下方式访问对象属性：。（点）或通过[]像

user.name

或

user[“name”]

，所以我使用了第二个，因为它是动态的，我看到了你对道具默认值（'name'和'value'）做了什么。。这就是为什么在我没有为optionVal设置值的情况下它仍然工作的原因。干得好，再次感谢！

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