vue.jsvuejs3primevue

Options not rendering correctly for PrimeVue Dropdowns

The options array of object passed to the Dropdown or Select component seem to render literally, rather than being parsed. My code below is based on the example provided in the PrimeVue docs:

The markup:

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

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

Below is how it is actually rendered:

enter image description here

I just can't see what I could be doing wrong here.

Solution

  • For this use case where PrimeVue is installed with CDN, you need to use kebab case rather than camel case for HTML attributes.

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