PrimeVue 下拉菜单的选项无法正确呈现

Question

传递给 Dropdown 或 Select 组件的对象选项数组似乎按字面意思呈现，而不是被解析。我下面的代码基于 PrimeVue 文档中提供的示例：

标记：

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

JS：

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');

下面是它的实际渲染方式：

我只是看不出我在这里做错了什么。

Answer 1

对于 PrimeVue 与 CDN 一起安装的用例，您需要对 HTML 属性使用短横线大小写而不是驼峰大小写。

<p-dropdown v-model="selectedCity" :options="cities" option-label="name" option-value="code"></p-dropdown>