mdbSelect @getValue

Hi there,

Here's our demo page with select code similiar to yours and it's working correctly. Please check out second example with your console: https://mdbootstrap.com/previews/templates/vue/#/forms/pro/select

Also, I've just checked your example and it's working too. Do you have any errors in your console while selecting an option?

Hi

thanks very much for your reply.

You're correct about the example working - and in fact its my mistake because I didnt actually test that example. I just stuck it up as similar to what I have in actual code - except for the object passed to select - and this was the problem.

Issue was caused by passing json array from php to component as a prop, and then via computed prop to the mdbSelect. This caused getValue not to fire.

There were no console errors, just @getValue didnt fire. @change worked as expected

When I passed the incoming json prop to select via data() the format of the object differs as shown below and @getValue works with that.

My vue/es is not good enough to understand why. So if you/anyone has any insight I'd be grateful

(4) [{…}, {…}, {…}, {…}]
0: {text: "Please select a County", value: null, disabled: true, selected: false}
1: {text: "Aberdeen", value: "Aberdeen", selected: true}
2: {text: "Aberdeenshire", value: "Aberdeenshire", selected: false}
3: {text: "Angus", value: "Angus", selected: false}
length: 4
__proto__: Array(0)


(4) [{…}, {…}, {…}, {…}, __ob__: Observer]
0:
disabled: (...)
selected: (...)
text: (...)
value: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get disabled: ƒ reactiveGetter()
set disabled: ƒ reactiveSetter(newVal)
get selected: ƒ reactiveGetter()
set selected: ƒ reactiveSetter(newVal)
get text: ƒ reactiveGetter()
set text: ƒ reactiveSetter(newVal)
get value: ƒ reactiveGetter()
set value: ƒ reactiveSetter(newVal)
__proto__: Object
1: {__ob__: Observer}
2: {__ob__: Observer}
3: {__ob__: Observer}
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
__proto__: Array

Hi there again,

Your options object should be passed to select from data(). That enables reactiveness of the content. In fact, we strongly recommend no to use @getValue event anymore. Your options object will be updated each time select has changed. If You want to verify it you should just use your options object (for example on submit)

Best regards

Your options object should be passed to select from data()

thank you for clarifying that

In fact, we strongly recommend no to use @getValue event anymore

I didnt know that. How could have known that? The docs and code dont reflect that position. At a quick look @getValue and @change seem to be doing the same thing. Is this correct, or is there some difference?

In any case I do need to listen to some event when select changes so as to fetch other relevant data from api. How do you suggest I do this please?

We've prepared an example of API select. You can find it here: https://mdbootstrap.com/docs/vue/forms/select/#api

Although we don't recommend using @getValue event you can still add it to your select and it's working also with dynamic data. I've just tested it with the following code and it's ok:

<mdb-select v-model="axiosOptions" label="Choose country" @getValue="getSelectValue" />

Best regards

I noted new events for select in 5.8.0

thanks