Dropdown / Select Options do not render correctly #2985

musaffarpatel · 2024-11-07T19:33:04Z

musaffarpatel
Nov 7, 2024

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:

<!DOCTYPE html>

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

</body>
</html>

And the JS:

const {createApp, ref, onMounted} = Vue;

const app = createApp({

    setup() {
        const = ref();
        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:

It seems to only want to accept simple one dimension array values: eg [1,2,3]

Please help.

Answered by j0rgedev

Nov 7, 2024

Hello @musaffarpatel. When using primevue via CDN, you must use kebab-case instead of camelCase for HTML attributes. So, the only HTML attribute that you'll have to change is optionLabel since it should be option-label. Something like this:

    <div id="app">
      <p-select
        v-model="selectedCity"
        :options="cities"
        option-label="name"
        placeholder="Select a City"
      />
    </div>

View full answer

j0rgedev · 2024-11-07T23:41:22Z

j0rgedev
Nov 7, 2024

Hello @musaffarpatel. When using primevue via CDN, you must use kebab-case instead of camelCase for HTML attributes. So, the only HTML attribute that you'll have to change is optionLabel since it should be option-label. Something like this:

    <div id="app">
      <p-select
        v-model="selectedCity"
        :options="cities"
        option-label="name"
        placeholder="Select a City"
      />
    </div>

1 reply

musaffarpatel Nov 8, 2024
Author

@j0rgedev I can't thank you enough for this

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

Dropdown / Select Options do not render correctly #2985

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

PrimeTek

Dropdown / Select Options do not render correctly #2985

musaffarpatel Nov 7, 2024

Replies: 1 comment · 1 reply

j0rgedev Nov 7, 2024

musaffarpatel Nov 8, 2024 Author

musaffarpatel
Nov 7, 2024

Replies: 1 comment 1 reply

j0rgedev
Nov 7, 2024

musaffarpatel Nov 8, 2024
Author