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

Ingvaldsen commented 6 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 6 years ago

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

Ingvaldsen commented 6 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 6 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 commented 6 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 6 years ago

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

Mikołaj Smoleński staff commented 6 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.