mdb-select does not work with v-model and @change event

Topic: mdb-select does not work with v-model and @change event

Ingvaldsen pro premium asked 2 weeks ago

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-title>Opprett event</mdb-modal-title>
<mdb-input label="Navn" v-model="" 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 class="col">
<mdb-input v-model="user.lastName" type="text" placeholder="Etternavn"/>
<div class="col">
<mdb-input v-model="" type="email" placeholder="Epost"/>
<div class="col">
<mdb-input v-model="user.alias" type="text" placeholder="Alias"/>
<div class="col">
<mdb-select v-model="user.role" @change.once="addFields()" :options="addPlayerOptions" />

<mdb-btn color="secondary" @click.prevent.native="showModal =false">Avbryt</mdb-btn>
<mdb-btn color="primary" type="submit">Opprett</mdb-btn>

Hello Ingvaldsen,

As You can read in our documentation ( mdb-select fires @getValue event on each data change or input.

Best regards

Ingvaldsen pro premium commented 2 weeks 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 commented 2 weeks ago

You can pass values to select by passing options array and get selected option using @getValue event.

Ingvaldsen pro premium commented 2 weeks 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?

Mikołaj Smoleński commented a week 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

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Vue
  • MDB Version: 4.8.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No