I am currently in the process of configuring a modal component that showcases various data from a specific record to the user. The user is provided with a Bulma dropdown component for each field, enabling them to make changes as needed. To streamline the code and avoid repetition, I placed the dropdown into its own component. However, I am facing an issue where the parent component needs to pass API data to the child component as a prop, but the child component also needs to notify the parent when a selection is made. This way, the parent can update the prop being passed and ensure consistency in the data before sending updates back to the API. I have explored options like using v-model, but existing examples do not seem suitable for my particular case.
<template>
<div class="dropdown" :class="dropdownClass">
<label class="dropdown-label">{{ label || "" }}</label>
<div class="dropdown-trigger" @click="toggleDropdown">
<button
class="button ticket-tags is-fullwidth"
:style="{
'background-color': backgroundColor,
color: textColor,
border: borderStyle
}"
>
<span>{{ firstItem || "" }}</span>
<span class="icon is-small">
<i class="bx bx-chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<div
class="dropdown-item"
v-for="item in items"
:key="item.data"
@click="itemSelected"
>
{{ item.data }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
const dropdownComponent = defineComponent({
name: "Dropdown",
props: {
label: {
type: String
},
firstItem: {
type: String,
required: true
},
items: {
type: Array
},
backgroundColor: {
type: String
},
textColor: {
type: String
},
borderStyle: {
type: String
}
},
emits: ["itemSelected"],
setup: (props, context) => {
const dropdownClass = ref("");
const toggleDropdown = () => {
dropdownClass.value =
dropdownClass.value === "is-active" ? "" : "is-active";
};
const itemSelected = (item) => {
dropdownClass.value = "";
context.emit("itemSelected", item);
};
return {
toggleDropdown,
dropdownClass,
itemSelected
};
}
});
The above code snippet illustrates how the dropdown works. The parent component supplies an array of options (items) and specifies which option should be displayed initially (firstItem). I am seeking a method for the child component to update the parent's firstItem value. It is possible that my approach is incorrect, so any guidance on this matter would be greatly appreciated. Thanks in advance!