MDB-SELECT set value programmatically


Topic: MDB-SELECT set value programmatically

Petr Urban pro premium priority asked 6 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 6 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 priority commented 6 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 6 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 5.1.0
  • Device: MacBook
  • Browser: Safari
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags