PrimeVue Dropdown组件选项渲染异常问题求助

传递给PrimeVue的Dropdown组件的对象选项数组未被解析，而是直接原样渲染，以下是基于官方文档编写的代码：

页面标记 #

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div id="app">
    <p-dropdown v-model="selectedCity" :options="cities" optionLabel="name" optionValue="code"></p-dropdown>
</div>

JavaScript代码 #

const {createApp, ref, onMounted} = Vue;

const app = createApp({
    setup() {
        const selectedCity = ref(null);
        const cities = ref([
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ]);

        onMounted(() => {
        });

        return {
            cities,
        };
    },
});

app.component('p-dropdown', PrimeVue.Dropdown);

app.mount('#app');

实际渲染效果 #

问题原因及解决方案 #

代码存在两处关键问题：

1. v-model绑定变量未暴露给模板：setup函数中定义的selectedCity未在return对象中返回，模板无法访问该变量，Dropdown组件无法正常初始化，导致选项渲染异常。
2. 未正确初始化PrimeVue：UMD模式下需通过app.use(PrimeVue)初始化核心功能（包括主题、组件上下文等），仅单独注册组件会导致组件缺少必要支持，无法解析options配置。

修正后的完整代码 #

const {createApp, ref, onMounted} = Vue;

const app = createApp({
    setup() {
        const selectedCity = ref(null);
        const cities = ref([
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ]);

        onMounted(() => {
        });

        return {
            cities,
            selectedCity
        };
    },
});

// 初始化PrimeVue并配置主题
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

app.mount('#app');

内容的提问来源于stack exchange，提问作者Musaffar Patel