如何在Nuxt3/Vue3中程序化选中Primevue Select组件选项

PrimeVue的Select组件通过v-model双向绑定控制选中状态，无需直接操作组件的.value属性，只需修改绑定的变量即可实现程序化选中。

核心实现步骤 #

• 确保selectedGageValue是Vue3的响应式变量（用ref或reactive声明）
• 直接给selectedGageValue赋值为目标选项的optionValue对应字段值（你配置的是description字段）

代码示例 #

// 用ref声明响应式变量
const selectedGageValue = ref('');

// 程序化修改选中项的函数
function setTargetGage(targetDesc) {
  selectedGageValue.value = targetDesc;
}

注意事项 #

• 赋值内容必须与getGageOptionsList中某一项的description字段完全匹配，因为你设置了optionValue="description"
• 如果选项是异步加载的，需等待数据加载完成后再修改selectedGageValue，否则会因选项未存在导致选中失效
• 修改绑定变量后组件会自动更新选中状态，若需触发业务逻辑，可在赋值后手动调用onGageSelectionChange

完整组件示例 #

<template>
  <Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
          optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
          @change="onGageSelectionChange" class="">
  </Select>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const selectedGageValue = ref('');
// 模拟选项列表
const getGageOptionsList = ref([
  { name: '量规A', description: 'gage_a_desc' },
  { name: '量规B', description: 'gage_b_desc' }
]);

function onGageSelectionChange(event) {
  console.log('选中值:', event.value);
}

// 组件挂载后自动选中量规B
onMounted(() => {
  selectedGageValue.value = 'gage_b_desc';
});
</script>

内容的提问来源于stack exchange，提问作者Norm Strassner