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

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>

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

londoh pro answered 5 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

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()"

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: <pre><mdb-select :options="addPlayerOptions[index]" @getValue="setValueOnModel(user, index)" @click.once.native="addFields()" /></pre><pre>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 } } },</pre>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()"

Please insert min. 15 characters.

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

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Ingvaldsen

30Support score
4Questions 1Answers 0Snippets