Multiselect does not fires getValue event on changing

web
mobile

Topic: Multiselect does not fires getValue event on changing

laniakea asked a week ago

Expected behavior

How I can read in docs:

Returns select value and text. Use this method to handle select state changes.

So I expect this event on any changes in selected items.

Actual behavior

Event "getValue" actually fires only on selecting/deselecting all with "Select all" option.

Resources (screenshots, code snippets etc.)

<mdb-select
    multiple
    selectAll
    wrapper-class="calc-rates-select"
    caret-class="text-white"
    label="Columns"
    :options="columnsOptions"
    @getValue="getColumnsSelectValue"
/>

methods: {
  getColumnsSelectValue (value, text) {
    console.log('getColumnsSelectValue', value)
  },
  ...
},

How can I see in sources this event really fires on clicking "Select all" and in watch section for data computed property. But actually watcher does not works as expected.

Please answer. Maybe I doing something wrong? We paid for PRO version and got code, that does not works properly =(


Hi there,

Please open the following docs page and check the console (F12): https://mdbootstrap.com/previews/templates/vue/#/forms/pro/multiselect

After selecting any option (even Select all option) it fires getValue event.

Here's the code of that demo section:

<mdb-select multiple selectAll @getValue="getSelectValue" :options="countries" />

(...)

<script>
import { mdbSelect } from 'mdbvue';

export default {
  name: 'MultiSelectPage',
  components: {
    mdbSelect
  },
  data() {
    return {
      countries: [
        { text: 'Choose your country', value: null, disabled: true, selected: true },
        { text: 'USA', value: 1 }, 
        { text: 'Germany', value: 2 }, 
        { text: 'France', value: 3 }, 
        { text: 'Poland', value: 4 }, 
        { text: 'Japan', value: 5 }
      ]
    };
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

Best regards


laniakea commented a week ago

Hi, Mikołaj!

Yes, I see that "on your machine" it works, but I really have situation like I have described.


Mikołaj Smoleński staff commented a week ago

Could you recreate the issue in our snippets editor? https://mdbootstrap.com/snippets/

Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Vue
  • MDB Version: 5.8.3
  • Device: Web (desktop)
  • Browser: Vivaldi 2.8.1664.40
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No