Multiselect does not fires getValue event on changing

Topic: Multiselect does not fires getValue event on changing

laniakea free asked 4 years 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 =(

Add comment

Mikołaj Smoleński staff answered 4 years ago

0 0 Best answer

Hi there,

Please open the following docs page and check the console (F12): <a href="https://mdbootstrap.com/previews/templates/vue/#/forms/pro/multiselect" target="_blank">https://mdbootstrap.com/previews/templates/vue/#/forms/pro/multiselect</a>

After selecting any option (even <code>Select all</code> option) it fires <code>getValue</code> event.

Here's the code of that demo section:

(...)

<pre class="prettyprint"><code><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>
</code></pre>

Best regards

Please insert min. 20 characters.

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 free commented 4 years 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 4 years ago

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

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: 5.8.3
Device: Web (desktop)
Browser: Vivaldi 2.8.1664.40
OS: Windows 10
Provided sample code: No
Provided link: No

laniakea

25Support score
3Questions 1Answers 0Snippets