mdb-input init value

Topic: mdb-input init value

Petr Urban asked 3 years ago


how is it possible to bind value to 'mdb-input' component? I have some kind of input form and I would like to fill 'mdb-input' with fetched default values from REST API.

In case when I use this syntax, it works fine:

<div class="md-form">
<input type="text"
placeholder="Enter server name..."

but for this, it is not working and it shows only the default value assigned in the data field definition:

<mdb-input type="text" @input="handleDbServer" v-bind:value="dbServer" id="dbServerInput" label="Database server" size="sm" />

I would like to use the 'mdb-input' component...any tip or help, please?


Mikołaj Smoleński staff answered 3 years ago

Hi there,

Currently You're able to set input's value by adding attribute 'value' to it. Also You can get dynamically changed value using '@input' event. Here's the example code:

<mdb-input type="text" label="Basic example" value="Example value" @input="handleInput"/>

methods: {
 handleInput (val) {
Is this enough for Your needs?
Best Regards


Petr Urban commented 3 years ago

when I use your approach: 

value="Example value" it needs to be hardcoded initial value, but I need to assign the value of the variable which is loaded from REST API.

Second use case is when user select some value by mdb-select dropdown, I want to show in the mdb-input value which is based on value in mdb-select.

This is not working for me with mdb-input field.

Mikołaj Smoleński staff answered 3 years ago

Since the next release You'll be able to use v-model also instead of @input event.

Here's the example:

<mdb-input type="text" label="Basic example" v-model="test" />

data() {
return {
test: 'Test'
watch: {
test() {

Best Regards

Petr Urban commented 3 years ago

what is the release date for next version, please?

Mikołaj Smoleński staff commented 3 years ago

The next release date is 20.12.

I am pretty sure it will solve Your problems with importing data from API and then working with our inputs and selects.

Best Regards

Mikołaj Smoleński staff commented 3 years ago

Also if You want to make it works now, i think the following code should help:

<mdb-input type="text" label="Basic example" :value="test" @input="handleInput"/>
data() {
 return {
  test:"Test value"
Best regards

Petr Urban commented 3 years ago

Thanks you, but this din't help.

There is still the "Test value" value in the field, even if I change the 'test' variable value by loading data from REST API.

Mikołaj Smoleński staff commented 3 years ago

Hi there again,

Are You sure You're updating test variable correctly? I am testing Your issue and it seems to work ok. There was a problem that te value wasn't emited after update, but it will be fixed in the thursday version.

Also if You're downloading mdbvue as a dependency from our GitLab, You can test mdb-input by changing branch into 'dev' (just add '#dev' to the link).

Best Regards

Petr Urban commented 3 years ago

Hi Mikolaj,

thanks for response. When I try to use the 'dev' branch the value gets updated correctly. Thank you ;)

Mikołaj Smoleński staff commented 3 years ago

I'm happy to hear it.

I'm closing the issue. Please remember to switch branches after the thursday relase (just remove '#dev' from the link). 

Best Regards

Please insert min. 20 characters.


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