Topic: mdb-input init value
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
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);
}
}
Petr Urban pro premium 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.
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 premium 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:
Petr Urban pro premium 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 pro premium 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- 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