---
title: "Vue Select Populating the picker Example | Mobiscroll"
component: "Select"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/select/data-sources"
---

# Populating the picker - Vue Select demo

Vue select component with different ways of loading the data: native html select, data objects and remote json. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/select/data-sources)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/pickers/select/data-sources)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/pickers/select/data-sources)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/data-sources.md), [jQuery](https://demo.mobiscroll.com/jquery/select/data-sources.md), [Angular](https://demo.mobiscroll.com/angular/select/data-sources.md), [React](https://demo.mobiscroll.com/react/select/data-sources.md)

## Description

The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:

- **Inline HTML**, embedded in the markup - This is good if you only have a couple of static options.
- With the **`data` option** - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a [custom item template](https://demo.mobiscroll.com/vue/select/item-templating).
- **Remote data** - Load it through the `data` option from a remote api/data source.

## What this demo shows

- Three single-value select examples using different data population methods.
- **Inline HTML** Embeds the select and its options directly in the markup.
- **Data object** Passes model data to the `data` option, which also supports custom item templates.
- **Remote data** Passes data loaded from a remote API or data source to the `data` option.
- **Select inputs** Opens the picker when the user focuses or clicks the associated input.
- **Input behavior** Displays the picker below the input and closes it when the user clicks outside.
- **Picker content** Presents a predefined list of options in a dropdown-style popup.
- **Hover state** Highlights an option when the user hovers over it.
- **Selection** Marks the selected option with a checkmark to indicate the current value.
- **Input value** Updates the associated input with the selected value.

## Best for

- **Small static lists** Embed a few fixed options directly in the markup with inline HTML.
- **Model-driven options** Populate the select through the `data` option when values come from application data.
- **Custom item layouts** Use the `data` option when select items need custom templates.
- **Remote datasets** Load options from a remote API or data source and pass the results to the `data` option.

## Tutorial

### Data object

Pass the items to the `data` option if you are loading from the model or in case of [item templating](https://demo.mobiscroll.com/vue/select/item-templating).

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber' },
  { text: 'Boston', value: 'bos' },
  { text: 'Chicago', value: 'chi' },
  { text: 'London', value: 'lon' },
  { text: 'Los Angeles', value: 'la' },
  { text: 'New York', value: 'ny' },
  { text: 'Paris', value: 'par' },
  { text: 'San Francisco', value: 'sf' }
]
</script>

<template>
  <MbscSelect
    :data="myData"
    :touchUi="false"
  />
</template>
```

### Remote data

The data loaded from a remote source needs to be passed to the `data` option as in the previous example.

```vue
<script setup>
const remoteData = ref([])
onMounted(() => {
  getJson('https://trial.mobiscroll.com/content/languages.json',
  (resp) => {
    remoteData.value = resp
  })
})
</script>

<template>
  <MbscSelect
    :data="remoteData"
    :touchUi="false"
  />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`label`](https://mobiscroll.com/docs/vue/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/select/api#opt-inputStyle) - option

## Code

### SFC JS

```vue
<script setup>
import { getJson, MbscPage, MbscSelect, setOptions } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const remoteData = ref([])
const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]

onMounted(() => {
  getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
    remoteData.value = resp
  })
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-form-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="myData"
            label="Data object"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
          />
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="remoteData"
            label="Remote data"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { getJson, MbscPage, MbscSelect, setOptions } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const remoteData = ref([])
const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]

onMounted(() => {
  getJson('https://trial.mobiscroll.com/content/languages.json', (resp) => {
    remoteData.value = resp
  })
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-form-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="myData"
            label="Data object"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
          />
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="remoteData"
            label="Remote data"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- **Inline HTML** works only for JS/jQuery: a native `<select>` with `<option value="...">Text</option>` children is passed to `mobiscroll.select('#id', {...})` / `$('#id').mobiscroll().select({...})` as-is, with no `data` option needed. React, Angular, and Vue always populate options through the `data` option/prop - there is no inline-markup path for those frameworks.
- **Data object** populates the picker from an array of `{ text, value }` objects passed to `data` (JS/jQuery `data: [...]` in `.select({...})`; React `data={myData}` prop on `<Select>`; Angular `[data]="myData"` binding with `myData` defined on the component; Vue `:data="myData"` binding with `myData` defined in `<script setup>`).
- **Remote data** loads the same `{ text, value }` shape asynchronously and assigns it after the initial render/init rather than at construction time:
  - JS/jQuery: get the instance via `.mobiscroll('getInst')` (or the return value of `mobiscroll.select(...)`), fetch with `mobiscroll.getJson(url, callback, 'jsonp')` / `$.getJSON(url, callback, 'jsonp')`, then call `inst.setOptions({ data: resp })` in the callback.
  - React: fetch inside a `useEffect` and store the response in state (`useState([])`), then bind `data={remoteData}` - the picker re-renders once the state updates.
  - Angular: fetch in `ngOnInit` via `this.http.get(url).subscribe(...)`, assign the response to a component property, and bind `[data]="remoteData"`.
  - Vue: fetch in `onMounted` and assign the response to a `ref([])`, bound as `:data="remoteData"`.
- `inputElement` points the picker at a separate `<input>` element (rather than the `<select>`/component itself) so the popup opens when that input is focused/clicked and shows the selected value there.
- The example data uses string `value`s (e.g. `'atl'`, `'ber'`); `text` is the label shown in the option list and, once selected, in the bound input.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Understanding display modes](https://demo.mobiscroll.com/vue/select/mobile-desktop-display.md) - Vue select/dropdown for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.