Topic: mdb-select does not work with v-model and @change event
Ingvaldsen
free
asked 5 years ago
Hi.
I have problems using v-model and @change event when using mdb-select. As you can see in the code below I have several mdb-input elements and they work fine. But the mdb-select is not working. The value is not bound to the model and no event is fired for the @change. Can someone please help me?
<form v-on:submit.prevent="submitEvent" action="#" method="post">
<mdb-modal-header>
<mdb-modal-title>Opprett event</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>
<mdb-input label="Navn" v-model="event.name" placeholder="Fyll inn" />
<p class="text-left">Fyll inn spillere</p>
<div class="row" v-for="(user,index) in event.users" :key="index">
<div class="col">
<mdb-input v-model="user.firstName" type="text" placeholder="Fornavn" />
</div>
<div class="col">
<mdb-input v-model="user.lastName" type="text" placeholder="Etternavn"/>
</div>
<div class="col">
<mdb-input v-model="user.email" type="email" placeholder="Epost"/>
</div>
<div class="col">
<mdb-input v-model="user.alias" type="text" placeholder="Alias"/>
</div>
<div class="col">
<mdb-select v-model="user.role" @change.once="addFields()" :options="addPlayerOptions" />
</div>
</div>
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.prevent.native="showModal =false">Avbryt</mdb-btn>
<mdb-btn color="primary" type="submit">Opprett</mdb-btn>
</mdb-modal-footer>
</form>
Mikołaj Smoleński
staff
answered 5 years ago
Hi there,
For the latest version of MDB Vue we recommend using Select component with v-model. It is described in the basic example: https://mdbootstrap.com/docs/vue/forms/select/#basic
Also please have a look at the more complex example of Select with data from API. https://mdbootstrap.com/docs/vue/forms/select/#api
Best regards
Mikołaj Smoleński staff commented 5 years ago
Also I'd like to say that v-model should be an array of objects. After change selected object gets a parameter selected
with value true
.
londoh
pro
answered 5 years ago
As You can read in our documentation (https://mdbootstrap.com/docs/vue/forms/select/) mdb-select fires @getValue event on each data change or input.
I cant see where in the docs it says that, or otherwise please explain here how @getValue is supposed to work
and is there now any solution to using v-model and @change event (except the hack)
thanks
l.
Mikołaj Smoleński
staff
answered 5 years ago
Hello Ingvaldsen,
As You can read in our documentation (https://mdbootstrap.com/docs/vue/forms/select/) mdb-select fires @getValue event on each data change or input.
Best regards
Ingvaldsen free commented 5 years ago
Yes, I can see that. But I can not quite see how I could replace v-model with that. Any suggestions?
Mikołaj Smoleński staff commented 5 years ago
You can pass values to select by passing options array and get selected option using @getValue event.
Ingvaldsen free commented 5 years ago
I found a way to do this even though I think it is a bit of a hack. The thing is that I dynamically add rows to add users in a form. Then I found now way to exactly know what kind of select that is modified. There is no way to add context information to a Javascript method and also get the value. So in my solution I only pass on the context information and then I go in the options array to find the value. Like this:
<mdb-select :options="addPlayerOptions[index]" @getValue="setValueOnModel(user, index)" @click.once.native="addFields()" />
setValueOnModel (user, index) {
let options = this.addPlayerOptions[index]
for (let i = 0; i < options.length; ++i) {
let value = options[i].value
let selected = options[i].selected
if (selected && (value !== undefined && value !== null)) {
user.role = value
}
}
},
Please inform me if there is a more elegant way to do this.
One other thing is that the blur event is not available so I had to use click event. Is there any plans for supporting blur event in the future?
@click.once.native="addFields()"
Mikołaj Smoleński staff commented 5 years ago
Thanks for sharing Your solution.
You're right that it's a bit of a hack, but still it's the best way to make it work right now. We'll add v-model integration with select soon.
Best regards
3Data free commented 5 years ago
+1
Please add v-model support to Pro form components. This is a real drag that this is not supported out of the box.
Mikołaj Smoleński staff commented 5 years ago
As I wrote, we're going to make it. Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.8.2
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No