1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: mdb-input init value

Petr Urban priority asked 6 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 6 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 priority commented 6 years ago

what is the release date for next version, please?

Mikołaj Smoleński staff commented 6 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 6 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 priority commented 6 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 6 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 priority commented 6 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 6 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

Mikołaj Smoleński staff answered 6 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 priority commented 6 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 4.8.2
  • Device: MacBook Pro
  • Browser: Safari
  • OS: Mac OS
  • Provided sample code: Yes
  • Provided link: No
Tags
mdb-input initial-value
About author
Petr Urban
54Support score
18Questions 1Answers 1Snippets