Dynamically select an option value

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

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>

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

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

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