How do you set the default value for mdbSelect?


Topic: How do you set the default value for mdbSelect?

How do you set the default or initial value for mdbSelect, could you please tell me how to do this for both single select and multi-select lists.

Please also add examples of this to your documentation. This is basic functionality but I can't see how you do it.

Thank you.


Magdalena Dembna staff premium answered 2 years ago

Even though there's not one dedicated example, several others have got preselected value, f.e. colour variations:

<template>
  <mdb-container>
    <mdb-select
      color="primary"
      v-model="colorOptions"
      label="Blue select"
    />
  </mdb-container>
</template>
<script>
  import { mdbSelect, mdbContainer } from "mdbvue";
  export default {
    name: "SelectPage",
    components: {
      mdbSelect,
      mdbContainer
    },
    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" }
        ]
      };
    }
  };
</script>

Works the same for the multiselect. Thank you for your remarks, we will provide this example in our documentation in the nearest future. Kind regards, Magdalena


phopkins@atomsoftware.com.au commented 2 years ago

Thank you Magdalena, this works.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.5.0
  • Device: Desktop PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags