Value Selection

The Select component can be used to select one or multiple values from a list. The values can be of any type, for example number, string or object as described in the data binding section.

Default value and default selection

The value and the default selection of the Select are two different things:

• Value - the actual value of the component. It is displayed in the input, returned as the selected value and passed to the @change event. Set an initial value with v-model.
• Default selection - the defaultSelection option. It is only a pre-selection inside the opened picker, shown while the component has no value. It is not set as the value: the input stays empty and nothing is returned until the user confirms the selection, for example with the Set button. Without it, the desktop UI pre-selects nothing, while the touch UI (see touchUi) pre-selects the first item in the selection highlight line.

<script setup>
  import { ref } from 'vue';
  import { MbscSelect } from '@mobiscroll/vue';

  const drinks = [
    { text: 'Mohito', value: 'mohito'},
    { text: 'Long Island', value: 'longisland'},
    { text: 'Margarita', value: 'margarita'}
  ];

  const selected = ref('margarita');
</script>

<template>
  <!-- Initial value: shown in the input, returned as the value -->
  <MbscSelect :data="drinks" v-model="selected" />

  <!-- Default selection: only pre-selected in the opened picker, the input stays empty -->
  <MbscSelect :data="drinks" defaultSelection="margarita" />
</template>

Single value selection

By default the Select operates in single value selection mode, but can be used to select multiple values from a list as well.

Selecting a single value

<script setup>
  import { ref } from 'vue';
  import { MbscSelect } from '@mobiscroll/vue';

  const drinks = [
    { text: 'Mohito', value: 'mohito'},
    { text: 'Long Island', value: 'longisland'},
    { text: 'Margarita', value: 'margarita'}
  ];

  const selected = ref();
</script>

<template>
  <MbscSelect :data="drinks" v-model="selected" />
</template>

Multiple value selection

Multiselection can be enabled using the selectMultiple option.

Selecting multiple items from a list

<script setup>
  import { ref } from 'vue';
  import { MbscSelect } from '@mobiscroll/vue';

  const bonuses = ['Free ticket', 'Free Drink', 'Free Hug'];

  const selected = ref();
</script>

<template>
  <MbscSelect :data="bonuses" v-model="selected" :selectMultiple="true" />
</template>