Vue自定义下拉组件：选中项ID传递与下拉禁用状态切换问题

1. 调整自定义下拉子组件 #

修改子组件的事件处理逻辑，统一在change事件中同时传递componentable_id（适配v-model）和完整选中项，确保父组件能拿到需要的ID，同时不破坏原有逻辑：

<template>
  <select
    v-bind="$attrs"
    @change="handleChange"
  >
    <option :value="null" disabled selected>
      {{ placeholder }}
    </option>
    <option v-for="option in options" :key="option.id" :value="option">
      {{ option.model }}
    </option>
  </select>
</template>

<script setup>
const props = defineProps(['options', 'placeholder'])
const emit = defineEmits(['input', 'change'])

function handleChange(e) {
  const selectedOption = e.target.value
  // 给v-model传递选中项的componentable_id
  emit('input', selectedOption ? selectedOption.componentable_id : null)
  // 给change事件传递完整选中项，供父组件处理状态切换
  emit('change', selectedOption)
}
</script>

2. 修正父组件的事件绑定与逻辑 #

父组件中需要修正事件绑定方式，同时通过v-model直接获取ID，结合change事件切换禁用状态：

<template>
  <Dropdown
    placeholder="Odaberi matičnu ploču"
    :options="motherboards"
    class="pc-builder-sixth-background"
    v-model="selectedMotherboardId"
    @change="handleMotherboardChange"
  />

  <Dropdown
    placeholder="Odaberi RAM memoriju"
    :options="rams"
    class="pc-builder-fourth-drodpown"
    :disabled="!isMotherboardChosen"
  />
</template>

<script setup>
import { ref } from 'vue'

// 存储选中的主板componentable_id，用于后续API逻辑
const selectedMotherboardId = ref(null)
// 控制其他下拉框的禁用状态
const isMotherboardChosen = ref(false)

function handleMotherboardChange(selectedOption) {
  // 有有效选中项则启用其他下拉，否则禁用
  isMotherboardChosen.value = !!selectedOption
  // 此时selectedMotherboardId已拿到需要的ID，可直接用于API请求
  console.log('选中的componentable_id:', selectedMotherboardId.value)
}
</script>

关键说明 #

• 子组件统一处理change事件，同时触发input（适配v-model）和change（父组件状态处理）两个事件，避免逻辑冲突
• 父组件通过v-model直接获取componentable_id，无需额外转换，可直接用于API调用
• 用!!selectedOption判断选中状态，比简单取反更严谨，避免空值导致的状态错误切换

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