Dynamically select an option value


Topic: Dynamically select an option value

jay2jam pro asked 3 years ago

Hello,

i know how to preselect an option value, but how can i select a specific value.

This is my option:

   <mdb-select search @getValue="getSelectValueDataTypes" :options="dataTypes" v-model="data_type" class="mt-0 mb-3 width90"  size="sm" />

dataTypes: [
    { text: 'Values', value: null, disabled: true,selected: true },
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' },
        { text: '4', value: '4' },

      ],

So what if, i want to set value 4 to selected true? On page load, not as standard!

Rgds Stefan


Magdalena Dembna staff premium answered 3 years ago

Hi, I you wish to preselect the specific value, add key-value pair selected: true directly to the option you want to be selected by default.

<template>
    <mdb-select color="primary" @getValue="getSelectValue" :options="colorOptions" label="Blue select" />
</template>

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

export default {
  name: 'SelectPage',
  components: {
    mdbSelect
  },
  data() {
    return {
      colorOptions: [
        { text: 'Option nr 1', value: 'Option 1', selected: true }, 
        { 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' }
      ],
    }
  }
};

Kind regards, Magdalena


jay2jam pro commented 3 years ago

Hello Magdalena,

thank you for your response, but i want to set the "selected:true", dynamically, not hard coded.

Something like:

if(var){ set "selected:true" to value: 'Option 4' }

Hope you understand :-)

Rgds Stefan


Magdalena Dembna staff premium answered 3 years ago

Hi, In the example below I've noticed that selected value indeed changes on click, but the placeholder stays the same. That's an issue we need to work on and I'm grateful to you for drawing our attention to it. Unfortunately, for this moment I'm not able to solve your problem entirely, but we'll do our best to improve this component. Kind regards, Magdalena {{value}} click

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

  export default {
    name: 'HelloWorld',
    components: {
      mdbSelect,
      mdbBtn
    },
    computed: {
        colorOptions(){
          return [
            { 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', selected: true }, 
            { text: 'Option nr 5', value: 'Option 5' }
          ]
        }
    },
    methods: {
      clickHandler() {
        this.colorOptions[3].selected = false;
        this.colorOptions[2].selected = true;
      }
    }
  };
</script>

jay2jam pro answered 3 years ago

Hello Magdalena,

do you have a timeline for me? The problem is, that we want to go online in 2 weeks and we have no time :-)

Rgds Stefan


Magdalena Dembna staff premium answered 3 years ago

Hi, we try our best to include this changes in the next release - 13.05.2019. Kind regards, Magdalena


Mikołaj Smoleński staff answered 3 years ago

Hi there Stefan,

The issue is connected with the Reactivity problem in Vue (https://vuejs.org/v2/guide/reactivity.html). To dynamically update select values, You need to use special syntax to inform Vue about object updates.

For example:

<template>
    <mdb-select v-model="basicOptions" label="Basic example" />
    <mdb-btn color="grey" size="sm" @click.native="selectOption(2)">Select option 2</mdb-btn>
</template>

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

export default {
  name: 'SelectPage',
  components: {
    mdbSelect,
    mdbBtn  
  },
  data() {
    return {
      basicOptions: [
        { text: 'Choose your option', value: null, disabled: true },
        { 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: {
    selectOption(key) {
      this.basicOptions.forEach(option => {
        option.selected = false;
      });
      this.$set(this.basicOptions[key], 'selected', true);
      this.basicOptions.sort();
    }
  }
};

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.2.0
  • Device: MAC
  • Browser: CHROME
  • OS: Moave
  • Provided sample code: No
  • Provided link: No