MDB-SELECT set value programmatically


Topic: MDB-SELECT set value programmatically

Petr Urban pro premium asked 2 years ago

Hi, is there any option how to set selected value for mdb-select programatically? I need this to be able to restore the value from localStorage historical value. Thanks, Petr


Jakub Strebeyko staff answered 2 years ago

Hi there Petr,

Welcome to the Support Board and thank for reaching out! So - yeah, you can have an option selected initially using the props object passed in to :options. There, you can set and customize your select options on per option basis. Have a look:

          <mdb-select :options="options" />`
          ...
          options: [
            { text: 'Option nr 1', value: 'Option 1' }, 
            { text: 'Option nr 2', value: 'Option 2' }, 
            { text: 'Option nr 3', value: 'Option 3' , selected: true}, 
            { text: 'Option nr 4', value: 'Option 4' }, 
          ]

That way your select will get rendered with the third option selected - hope it helps your case!

With Best Regards, Kuba


Petr Urban pro premium commented 2 years ago

Hi Kuba,thanks, this is working fine, but I need to reload the options in 'created()', I was trying to setup the historical values from localStorage in 'mounted()' step and that was wrong.

BR,Petr


Jakub Strebeyko staff commented 2 years ago

Hi Petr, am I getting you correctly in that you are trying to retrieve localStorage content in created() hook rather than mounted()? The examples I came across did it in mounted(), too

Best, Kuba


Please insert min. 20 characters.