mdb-select change event

Topic: mdb-select change event

enviaya pro asked 4 years ago

For a long time I use the next code to update model via select

<mdb-basic-select
        :options="measurementUnitList"
        @change="package.measurementUnit = $event"
        :label="$t('packaging_form.fields.measurement_unit_placeholder')"
      />

but after update mdb-vue to version 6.7.0 this functionality doesn't work anymore. Is it bug or feature? if it's bug, please do basic testing for your components before release.

Magdalena Dembna staff commented 4 years ago

Can you open Vue dev tools and check if the change event is emitted by mdbSelect (should emit both value and text)? Is using v-model and getValue event impossible as well? Are you using a custom wrapper on the component? As far I wasn't able to reproduce your issue. Kind regards, Magdalena

enviaya pro commented 4 years ago

I back to this issue. I have 6.5.0 version in production.change event always returned only value for mdbSelect. Never mind: I figured out what the problem is but I haven't resolved it yet. May be you try to help me?Until I didn't update MDB VUE library all selects worked fine. The most select box components uses computed property in v-model. But after mdb version update when I choose some element in selectbox change event doesn't trigger.

If I declare v-model data as property of data object in the component - everything fine. But if pass computed property on v-model the event sequence is another for mdbSelect component. Please check it and give feedback. Thanks.

PS: I am not using wrapper or something else in this case - only mdbSelect.

<mdb-select v-model="layoutNamesList" @change="userInfo.serviceNameLayout = $event"></mdb-select>

Here is computed property:

public get layoutNamesList (): ISelectData[] {
return LAYOUT_NAMES.map((el) => {
  return {
    text: this.$t(el.text).toString(),
    value: el.value,
    selected: (this.user.serviceNameLayout === el.value)
  }})

}

<p>I back to this issue. I have 6.5.0 version in production.<code>change</code> event always returned only value for mdbSelect. Never mind: I figured out what the problem is but I haven't resolved it yet. May be you try to help me?Until I didn't update MDB VUE library all selects worked fine. The most select box components uses computed property in v-model. But after mdb version update when I choose some element in selectbox change event doesn't trigger.</p>

<p>If I declare v-model data as property of data object in the component - everything fine. But if pass computed property on v-model the event sequence is another for mdbSelect component. Please check it and give feedback. Thanks.</p>

<p>PS: I am not using wrapper or something else in this case - only mdbSelect.</p>

<p>Here is computed property:</p>

<pre class="prettyprint"><code>public get layoutNamesList (): ISelectData[] {
return LAYOUT_NAMES.map((el) => {
  return {
    text: this.$t(el.text).toString(),
    value: el.value,
    selected: (this.user.serviceNameLayout === el.value)
  }})
</code></pre>

Please insert min. 15 characters.

Magdalena Dembna staff commented 4 years ago

Once I again I need to you to check Vue dev tools in your browser console - I wasn't able to reproduce your issue and need more details. If you're not familiar with dev tools, you can do a simple test and create a simple method which prints something in the console on @change event. I assume that this problem occurs even with a value bound to a property in data, not only computed? Also assigning the $event value to an object's property won't trigger any change in the DOM - not without a deep watcher.

As for using computed property - It won't work as expected if you won't use the getter/setter syntax: https://vuejs.org/v2/guide/computed.html#Computed-Setter

Please insert min. 15 characters.

enviaya pro commented 4 years ago

@Magdalena Dembnawe can argue for a very long time. I am familiar with VUE dev tools etc.... Give me working example where you use v-model="computedList" for 6.7.1, where computedList is getter function, please?In previous versions of mdb vue I use it for publish select boxes for tables on the page, where each select in row has the same list of values but different selected value.

enviaya pro commented 4 years ago

@Magdalena DembnaCould you tell me please how I can populate a lot of the same mdbSelect components on the page but with different selected values? For example, I have table on the page with two records. Each record has select box with countries list and each selectbox has selected value related to specific record.

Magdalena Dembna staff commented 4 years ago

I have never intended to argue with you - I was trying to get some additional data to solve your problem - sometimes it's almost impossible to reproduce a case without asking questions. As for the computed value: using a computed value with just a getter doesn't update the original array - it's a practice which we don't recommend. I don't think that for this component there's a way around creating two separate arrays and allowing the component to modify selected properties. I was trying several methods, but unfortunately, the change was detected in neither. Best regards, Magdalena

enviaya pro commented 4 years ago

hi, @Magdalena Dembna Thanks for the answer. I agree with you that "As for the computed value: using a computed value with just a getter doesn't update the original array - it's a practice which we don't recommend." options array is only data source for the select component. Select box should use this property only for rendering elements for select. It's doesn't matter how I prepared this list: like data array, getter function/coputed property etc.... Why component is trying to update this array? Do you agree? Moreover, you advised me to create the same arrays for each rows. What If I have 50 rows or 100. should I create 50 identical arrays just for the component to work as it should?I am not sure this is right way.Best regards,Enviaya team.

Please insert min. 15 characters.

Magdalena Dembna staff commented 4 years ago

I agree that this feature is something we should definitely work on - we designed mdbSelect with two-way data binding in mind and we haven't created an example with a one data source and many select components. I created a task on our board to take a look at this feature in the future. In the meantime, I've created a workaround to use one array and computed values until we create a solution within our package - you can find the code in the post below. Best regards, Magdalena

enviaya pro commented 4 years ago

Hi, @Magdalena Dembna Thanks for response. I have found solution. I added wrapper for each similar select box contains the same options. this way each element has own set of data stored in data property and initialised in mount method. Thanks and best regards, Enviaya Team

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

<p>A workaround example with one array of data and two selects: </p>

<pre class="prettyprint"><code><template>
      <mdb-container>
            <mdb-row>
              <mdb-col sm="6">
                <mdb-select
                  :options="options1"
                  label="1"
                  @toggleSelect="setSelected($event, 'select1')"
                  ref="select1"
                />
              </mdb-col>
              {{ select1 }}
              <mdb-col sm="6">
                <mdb-select
                  :options="basicOptions"
                  label="2"
                  @toggleSelect="setSelected($event, 'select2')"
                  ref="select2"
                />
              </mdb-col>
              {{ select2 }}
            </mdb-row>
      </mdb-container>
    </template>

export default {
      name: "SelectPage",
      components: {
        mdbSelect,
        mdbContainer,
        mdbRow,
        mdbCol
      },
      computed: {
        options1() {
          return this.basicOptions.map((option) => ({
            ...option,
            selected: option.value === this.select1,
          }));
        },
        options2() {
          return this.basicOptions.map((option) => ({
            ...option,
            selected: option.value === this.select2,
          }));
        },
      },
      data() {
        return {
          select1: null,
          select2: null,
          basicOptions: [
            { text: "Option nr 1", value: "Option 1" },
            { text: "Option nr 2", value: "Option 2" },
            { text: "Option nr 3", value: "Option 3" },
            { text: "Option nr 4", value: "Option 4" },
            { text: "Option nr 5", value: "Option 5" },
          ],
        };
      },
      methods: {
        setSelected(e, select) {
          if (e) return;

const selected = this.$refs[select].data.find(
            (option) => option.selected
          );
          this[select] = selected ? selected.value : null;
        },
      },
    };
    </script>
</code></pre>

Please insert min. 20 characters.

A workaround example with one array of data and two selects:

<template>
      <mdb-container>
            <mdb-row>
              <mdb-col sm="6">
                <mdb-select
                  :options="options1"
                  label="1"
                  @toggleSelect="setSelected($event, 'select1')"
                  ref="select1"
                />
              </mdb-col>
              {{ select1 }}
              <mdb-col sm="6">
                <mdb-select
                  :options="basicOptions"
                  label="2"
                  @toggleSelect="setSelected($event, 'select2')"
                  ref="select2"
                />
              </mdb-col>
              {{ select2 }}
            </mdb-row>
      </mdb-container>
    </template>

    <script>
    import { mdbSelect, mdbContainer, mdbRow, mdbCol } from "mdbvue";

    export default {
      name: "SelectPage",
      components: {
        mdbSelect,
        mdbContainer,
        mdbRow,
        mdbCol
      },
      computed: {
        options1() {
          return this.basicOptions.map((option) => ({
            ...option,
            selected: option.value === this.select1,
          }));
        },
        options2() {
          return this.basicOptions.map((option) => ({
            ...option,
            selected: option.value === this.select2,
          }));
        },
      },
      data() {
        return {
          select1: null,
          select2: null,
          basicOptions: [
            { text: "Option nr 1", value: "Option 1" },
            { text: "Option nr 2", value: "Option 2" },
            { text: "Option nr 3", value: "Option 3" },
            { text: "Option nr 4", value: "Option 4" },
            { text: "Option nr 5", value: "Option 5" },
          ],
        };
      },
      methods: {
        setSelected(e, select) {
          if (e) return;

          const selected = this.$refs[select].data.find(
            (option) => option.selected
          );
          this[select] = selected ? selected.value : null;
        },
      },
    };
    </script>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Vue
MDB Version: 6.7.1
Device: Laptop
Browser: Chrome
OS: Mac OS
Provided sample code: No
Provided link: No

enviaya

Pro User 25Support score
6Questions 0Answers 0Snippets