Trigger an onclick inside a PrimeVue Dropdown

I am trying to test using a console.log on a Dropdown inside a PrimeVue. Looking this up I was suggested I would use "item-template" but this seems like it is not used in the since it's not an @click or onclick. Any suggestions?

Also to further test this, I added a console.log on the click if you click on the dropdown initially. I just was not able to replicate this on the onclick inside the options.

<script>
import Dropdown from 'primevue/dropdown'

const onDropdownClick = () => {
console.log('yes')
}

const customItem = () => {
console.log('inside')
}
</script>

<Dropdown
   v-model="value"
   :options="options"
   :name="props.name"
   :placeholder="placeholder"
   :editable="editable"
   :disabled="disabled"
   :option-label="props.ol"
   :option-value="props.ov"
   item-template="customItem"
   @click="onDropdownClick"
/>

As of now I am not sure how to make the customItem in my script trigger on click if I select an option in my dropdown. Any help would be appreciated.

Update for further explanation:

I am trying to specifically target the <li> inside the PrimeVue Dropdown and give them an onclick function. I already have a list showing up from my database so I just need to give each one of them an onlick

Solution

If I understood it correctly, you want to trigger a function once you click an option from the dropdown. To achieve this, you need to add this event listener to your <DropDown> tag:

@update:modelValue="functionToTrigger()"

And then if you need the value of the clicked list element, pass 'value' to functionToTrigger().

Another solution for that is using <slot>. Adding this:

   <template #value="slotProps" >
    <div v-if="slotProps.value" class="flex align-items-center">
     <li style="list-style-type:none" @click="onOptionClick(slotProps.value)">
        {{ slotProps.value.name }}
     </li>
    </div>
   </template>

Inside tag will ensure you to add an onClick event to the selected list element.

Hope this will help!!