Can I pre select a value in an PrimeVue Dropdown component?

Question

Case: I am using PrimeVue in a Vue.js project. In this case I have a dropdown, as a component from PrimeVue, which uses an array of objects. The dropdown component looks like this:

<template #position>
    <Dropdown
        class="multiselect-fullsize"
        v-model="selectedFilter[index].pos"
        :options="filterPositions"
        optionLabel="name"
        placeholder="Position" />
    </template>

This dropdown component has a :options property, which refers to the following array:

filterPositions: [
    {"name": "0", "value": "0"},
    {"name": "1", "value": "1"},
    {"name": "2", "value": "2"},
    {"name": "3", "value": "3"},
    {"name": "4", "value": "4"},
    {"name": "5", "value": "5"},
    {"name": "6", "value": "6"},
    {"name": "7", "value": "7"},
    {"name": "8", "value": "8"}
  ]

Question: Is there a way to specify a pre selected item in this dropdown from PrimeVue?

Edit: According to the documentation, there is no property to define a pre selected item. So maybe, if there is a solution, it could be JavaScript only.

I allready found a workaround for a later stage in my app, if no pre selection is possible. But this don´t answer my question. — StevenSiebert, Aug 27 '21 at 10:48
Maybe related https://stackoverflow.com/questions/51029399/how-to-pre-select-primeng-dropdown-values — Alexandre Elshobokshy, Aug 27 '21 at 10:58
@AlexandreElshobokshy I tried the solution and it haven´t worked. — StevenSiebert, Sep 03 '21 at 09:43

score 4 · Accepted Answer · answered Sep 14 '21 at 11:26

The answer is: Yes! The description in the documentation of Dropdown | PrimeVue is a bit confusing, at least for me. The problem is, that it isn´t enough to provide a v-model as I did with v-model="selectedFilter[index].pos", I also have to define optionValue and in my case optionValue="value", because the values in filterPositions have the key value.

Looks like, if this is set, PrimeVue´s Dropdown is able to check if the v-model matches the optionValue. If not, v-model would be compared to the whole filterPositions item. For example:

Without optionValue="value":

{"name": "4", "value": "4"} === 4

With optionValue="value":

4 === 4

So my Dropdown component in this case have to look like this:

<Dropdown
    class="multiselect-fullsize"
    v-model="selectedFilter[index].pos"
    :options="filterPositions"
    optionLabel="name"
    optionValue="value"
    placeholder="Position"
/>

score -1 · Answer 2 · answered Jan 20 '22 at 11:06

-1

selectedFilter[index].pos = {"name": "4", "value": "4"}

answered Jan 20 '22 at 11:06

Snakecc

21
3

2

See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate in addition to help solve the problem. – the Tin Man Jan 22 '22 at 08:47

score -3 · Answer 3 · answered Nov 01 '21 at 15:31

-3

just set placeholder value to pre selected value

<Dropdown
class="multiselect-fullsize"
v-model="selectedFilter"
:options="filterPositions"
optionLabel="name"
optionValue="value"
:placeholder="selectedFilter.value"
/>

answered Nov 01 '21 at 15:31

user17301346

1

Hey, that is exactly my own answer from over 2 weeks ago. – StevenSiebert Nov 02 '21 at 08:38
1

This doesn´t set a preselected value, only set a text without value – Álvaro Oct 03 '22 at 08:31

Can I pre select a value in an PrimeVue Dropdown component?

3 Answers3