在 PrimeVue 下拉菜单中触发 onclick

Question

我正在尝试在 PrimeVue 内的下拉菜单上使用 console.log 进行测试。查了一下，有人建议我使用“item-template”，但这似乎没有在 中使用，因为它不是

@click

或

onclick

。有什么建议吗？

为了进一步测试这一点，如果您最初单击下拉列表，我会在单击时添加一个

console.log

。我只是无法在选项内的 onclick 上复制此内容。

<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"
/>

到目前为止，如果我在下拉列表中选择一个选项，我不确定如何使脚本中的

customItem

在单击时触发。任何帮助将不胜感激。

更新进一步解释：

我正在尝试专门针对 PrimeVue 下拉列表中的

<li>

并为它们提供

onclick

函数。我的数据库中已经显示了一个列表，所以我只需要给每个人一个

onlick

Answer 1

如果我理解正确的话，您希望在单击下拉列表中的选项后触发一个功能。为此，您需要将此事件侦听器添加到您的

<DropDown>

标签中：

@update:modelValue="functionToTrigger()"

然后，如果您需要单击的列表元素的值，请将“值”传递给

functionToTrigger()

。

另一个解决方案是使用

<slot>

。添加此：

   <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>

内部标签将确保您将 onClick 事件添加到所选列表元素。

希望这会有所帮助！