mdb-input init value

web
mobile

Topic: mdb-input init value

Petr Urban pro asked 2 years ago

Hi,

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"
size="sm"
id="dbServer"
class="form-control"
placeholder="Enter server name..."
v-model="dbServer"
:state="Boolean(dbServer)">
</div>

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?

Thanks


Mikołaj Smoleński staff answered 2 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) {
  console.log(val);
 }
}
 
Is this enough for Your needs?
 
Best Regards

 


Petr Urban pro commented 2 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 2 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() {
console.log(this.test);
}
}


Best Regards


Petr Urban pro commented 2 years ago

what is the release date for next version, please?


Mikołaj Smoleński staff commented 2 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 2 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 pro commented 2 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 2 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 pro commented 2 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 2 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.
Status

Resolved

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