Vue Select Populating the picker Example

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.
Remote data - Load it through the data option from a remote api/data source.

Get started with this example

Data object

Pass the items to the data option if you are loading from the model or in case of item templating.

Javascript jQuery Angular React 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=""
  />
</template>
                

Data object

Remote data

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

Javascript jQuery Angular React 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=""
  />
</template>
                

Remote data

Preview in fullscreen