[SOLVED] Programatically select an option from a Primevue Select element

Programatically select an option from a Primevue Select element

I have a Primevue Select element in my Nuxt3/Vue3 app. I want to change the selected option programatically, but I can't find information on how to do that. There is not ".value" I can set.

This is my element:

              <Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
            optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
            @change="onGageSelectionChange" class=""></Select>

Solution

You have the following code:

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
        optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
        @change="onGageSelectionChange" class=""></Select>

Looking at your component I can predict that your getGageOptionsList has some value like this:

getGageOptionsList: [ { name: 'Option1', description: 'Option1 description'}, { name: 'Option2', description: 'Option2 description'} ]

When you are using the property optionValue from the Select component, the component will put the description value inside your v-mode selectedGageValue

So, to select it you'll need to set the description value to the selectedGageValue, like this:

this.selectedGageValue = 'Option2 description' //this will select the second option

It will work, BUT that's not the correct way to do that, because isn't common to use a long string as identifier. Here are some better ways to approach it

First Method - Change your Select component and remove the optionValue, this way you will let the PrimeVue know you want the full array value eg: { name: 'Option1', description: 'Option1 description'} as optionValue.

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
    placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
    @change="onGageSelectionChange" class=""></Select>

Now you need to set the entire value from the key stored in getGageOptionsList you want. eg:

this.selectedGageValue = this.getGageOptionsList[1] //it will programatically select the second option

Second Method - Change your Select component and edit the optionValue to a simpler property like 'id' and add it to your options, like this:

getGageOptionsList: [ { id:0, name: 'Option1', description: 'Option1 description'}, { id:1, name: 'Option2', description: 'Option2 description'} ]

now, change your component:

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
    optionValue="id" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
    @change="onGageSelectionChange" class=""></Select>

and select programatically the id

this.selectedGageValue = 1 //this will select the second option