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 7 months 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 6 months 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 pro premium commented 6 months 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 6 months ago

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


Ingvaldsen pro premium commented 6 months 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 6 months 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 pro premium commented 6 months 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 6 months ago

As I wrote, we're going to make it. Best regards


londoh pro answered 2 months 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 2 months 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 2 months 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.


Please insert min. 20 characters.
Status

Answered

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