PrimeVue/PrimeFace组件的optionLabel如何正确作为函数使用？

为什么你遇到函数只被调用一次 #

绝大多数情况是两个写法踩坑：

• 未加动态绑定标识（简写为冒号:，全称v-bind）直接写函数名：比如<Listbox optionLabel="getCityLabel" />，这种写法本质是把字符串"getCityLabel"当作选项的固定字段名传给组件，组件根本不会尝试执行这个函数，更不会逐个调用。
• 给函数加了括号，把执行结果而非函数本身传进去：比如写成:optionLabel="getCityLabel(item)"，这行代码会在父组件渲染的第一时间就执行一次函数，把返回的字符串当作固定值传给optionLabel，自然不会对每个选项单独执行。

正确使用方式 #

直接把函数的引用作为动态绑定值传入即可，函数会接收单个选项对象作为入参，返回对应要展示的标签文本：

<template>
  <Listbox 
    :options="cities" 
    :optionLabel="getCityDisplay"
  />
</template>

<script setup>
// 示例选项数据
const cities = [
  { id: 1, name: "广州", province: "广东" },
  { id: 2, name: "西安", province: "陕西" }
]

// 自定义标签生成逻辑，可自由拼接字段、做条件判断
const getCityDisplay = (city) => {
  // 不需要和选项的固定字段绑定，灵活适配展示需求
  return `${city.province} · ${city.name}`
}
</script>

补充说明：如果使用Options API写法，把对应的标签生成函数定义在methods配置项里，同样以动态绑定的方式传入即可。组件内部会自动遍历所有选项，逐个调用你传入的函数生成对应标签，不会只执行一次。

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