Vue3中如何为不同结构数组动态传值复用下拉选择组件

核心问题分析 #

1. 数据源是对象类型，但组件props里optArr定义为Array，遍历会出错；
2. 组件中访问动态属性的方式错误：get.opt_value是访问固定名为opt_value的属性，而非使用传入的opt_value属性名；
3. 调用组件时，属性名参数未加引号，Vue会将其视为变量而非字符串，导致找不到对应值；
4. other_dummy_data存在重复键0，会导致数据被覆盖。

步骤1：修正InputSelect组件 #

修改组件内的属性访问方式，使用方括号语法读取动态属性名，同时兼容对象转数组的处理：

<template>
    <select
      :id="input_id"
      :value="modelValue"
      @input="$event => $emit('update:modelValue', $event.target.value)"
    >
    <!-- 将对象转成数组后遍历，同时兼容数组类型输入 -->
    <option v-for="(item, index) in Object.values(optArr)" 
      :value="item[opt_value]" 
      :key="index">{{ item[opt_name] }}</option>
    </select>
</template>

<script>
export default {
  name: 'InputSelect',
  props: {
    optArr: [Array, Object], // 同时支持数组和对象类型的数据源
    opt_value: String,
    opt_name: String,
    input_id: String,
    modelValue: [String, Number] // 兼容数值类型的选中值
  }
}
</script>

步骤2：修正数据源 #

other_dummy_data的键重复会导致数据丢失，修正为：

other_dummy_data: {
  0: { id_company: 25, name: 'SHIMIT Co.' },
  1: { id_company: 26, name: 'BIG SHIMIT Co.' },
}

也可以直接改为数组更直观：

other_dummy_data: [
  { id_company: 25, name: 'SHIMIT Co.' },
  { id_company: 26, name: 'BIG SHIMIT Co.' },
]

步骤3：修正组件调用方式 #

属性名参数需要用引号包裹成字符串，同时注意props的驼峰命名对应：

<!-- 渲染search_types -->
<InputSelect 
  v-model="sample_second_selected"
  :optArr="search_types" 
  :opt_name="'name'" 
  :opt_value="'svalue'"
/>

<!-- 渲染other_dummy_data -->
<InputSelect 
  v-model="sample_selected"
  :optArr="other_dummy_data" 
  :opt_name="'name'" 
  :opt_value="'id_company'"
/>

关键说明 #

• 方括号语法item[opt_value]：通过变量opt_value的值动态访问对象属性，解决不同数据源属性名不一致的问题；
• 组件props中optArr同时支持数组和对象，用Object.values(optArr)统一转为数组遍历；
• 传入属性名时加单引号，确保Vue将其视为字符串而非全局变量。

内容的提问来源于stack exchange，提问作者Murat Kezli