Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

phopkins@atomsoftware.com.au free asked 4 years ago


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 answered 4 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 free commented 4 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

  • ForumUser: 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