I'm trying to send ID of selected option to my parent component. Also, when the value of my dropdown changes I want to toggle some of my dropdowns to stop being disabled.

我正在尝试将所选选项的ID发送到我的父组件。此外，当我的值的变化，我想切换我的一些下拉菜单，以停止被禁用。

This is my custom dropdown component:

这是我的定制下拉组件：

<template>
 <select
   @input="$emit('input', $event.target.value)"
   v-bind="$attrs"
   @change="change"
 >
   <option :value="null" disabled selected>
     {{ placeholder }}
   </option>
   <option v-for="option in options" :key="option.id" :value="option">
     {{ option.model }}
   </option>
 </select>
</template>

The problem is that I should send the ID of my option (option.componentable_id), but if I handle value change here then my logic in parent component won't work.

问题是我应该发送我的选项的ID(option.Componentable_id)，但是如果我在这里处理值更改，那么父组件中的逻辑将不起作用。

Currently, my parent component has this:

目前，我的父组件具有以下内容：

     <Dropdown
      placeholder="Odaberi matičnu ploču"
      :options="motherboards"
      hardcoded-value="First option"
      class="pc-builder-sixth-background"
      :change="setIsMotherboardChosen"
    />

Relevant to that, I have 2 dropdowns that are being enabled or disabled depending on this state:

与此相关的是，我有两个根据此状态启用或禁用的下拉列表：

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

Function to set my value is here:

设置我的值的函数在这里：

function setIsMotherboardChosen() {
  isMotherboardChosen.value = !isMotherboardChosen.value;
  console.log(isMotherboardChosen.value);
}

I know currently the code isn't so clean, but I just want to send my id and toggle value in the same time. I tried different types of binds etc. but the problem is that I have to do 2 things in different files so I'm struggling. I have managed to make disabling logic, but I don't know how to connect it with my ID API logic.

我知道目前代码不是很干净，但我只想同时发送我的id和切换值。我尝试了不同类型的绑定等，但问题是我必须在不同的文件中做两件事，所以我很困难。我已经成功地创建了禁用逻辑，但我不知道如何将其与我的ID API逻辑联系起来。

You're not listening for any events in the parent.

To listen to the input event you should use @input, and the method you want to call when the event is captured:

您没有监听父级中的任何事件。要监听输入事件，你应该使用@input，以及在捕获事件时要调用的方法：

<Dropdown @input="setIsMotherboardChosen"

Even better though would be to use v-model as this is the exact situation that it's meant for (two-way binding)

不过，更好的方法是使用v模型，因为这正是它所要处理的情况(双向绑定)

Parent

父级

const motherboardOption = ref(null)

<template>
  <Dropdown v-model="motherboardOption" />
</template>

Child

小孩儿

import { reactive, computed } from 'vue';

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

<select v-model="value">
  <option :value="null" disabled selected>
    placeholder
  </option>
  <option v-for="option in options" :key="option.id" :value="option">
    {{ option.model }}
  </option>
</select>

This way, whenever a dropdown option is selected, motherboardOption in the parent will have that value immediately assigned to it, meaning the option id will be accessible as motherboardOption.id, and you can still use this value when setting your :disabled props:

这样，无论何时选择下拉选项，父级中的母板选项都将立即被分配该值，这意味着选项id将可以作为母板选项.id进行访问，并且您在设置：DISABLED道具时仍然可以使用此值：

<Dropdown :disabled="!motherboardOption" />

Vue Playground example

Vue Playground示例

At this point, it would be better and easier to use v-mount attribute and bind it to a ref. It should work the same for your component

此时，使用v-mount属性并将其绑定到ref会更好、更容易。它应该对您的组件起到相同的作用

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

// ref that will store our selected value
const message = ref('')
</script>

<template>
  <p>Message is: {{ message }}</p>
   <!-- `v-model`is used to bind selection to `message` ref -->
  <input v-model="message" placeholder="input" />
</template>

You can find more about handling forms in the vue documentation

您可以在VUE文档中找到有关处理表单的更多信息