mdbSelect @getValue


Topic: mdbSelect @getValue

londoh pro asked 5 years ago

Expected behavior as per docs @getValue will be fired when selecting an option from mdbSelect

Actual behavior @getValue does not appear to be fired

Resources (screenshots, code snippets etc.) There seems to be quite a bit of conflicting info in the docs and here in forum as to when getValue is fired or even getValue is fired at all

I can see that @change is fired and v-model is now available.

getValue is still included in codebase, on some calls, but it doesnt trigger in a basic component. EG adapting an example from your docs, I expect this should log selected text and value to console but it doesnt:

<template>
  <mdb-container>
    <mdb-select v-model="basicOptions" @getValue="selectChanged"/>
  </mdb-container>
</template>

<script>
  import { mdbSelect, mdbContainer } from 'mdbvue';
  export default {
    name: 'SelectPage',
    components: {
      mdbSelect,
      mdbContainer
    },
    data() {
      return {
        basicOptions: [
          { text: 'Choose your option', value: null, disabled: true, selected: true },
          { text: 'Option nr 1', value: 'Option 1' },
          { text: 'Option nr 2', value: 'Option 2' },
          { text: 'Option nr 3', value: 'Option 3' }
        ]
      };
    },
    methods: {
        selectChanged: function (value, text) {
            console.log('selectChanged', value, text);
        },
    }

  }
</script>

So I have 2 requests... 1) Please provide clear up-to date example(s) for using mdbSelect

2) As per my other post re blur on input component - is it possible please to also make select fire blur event. Because it will be good to have consistent events across the form components

thank you


Mikołaj Smoleński staff answered 5 years ago

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?


londoh pro answered 5 years ago

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

Mikołaj Smoleński staff answered 5 years ago

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


londoh pro answered 5 years ago

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?


Mikołaj Smoleński staff answered 5 years ago

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


ha6755ad commented 5 years ago

You all should really work on a way to get v-model to work properly for these. V-model is 2 way data binding. This version of v-model is the same as saying :options="axiosOptions" it should be setting a data element to the value of selected as well.


Mikołaj Smoleński staff commented 5 years ago

We've just released the new version of mdbSelect. Please check if the issue still exists. https://vue.mdbootstrap.com/#/forms/pro/select

Best regards


londoh pro answered 5 years ago

I noted new events for select in 5.8.0

thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.6.0
  • Device: all
  • Browser: any
  • OS: any and all
  • Provided sample code: No
  • Provided link: No