Vue Select Country Dropdown Example

Use the select component as a country picker on mobile and desktop. You can add the dropdown to any input or use Mobiscroll input fields. If you don't want to make it a dropdown, you can embed the picker inline right into a page.

Search is enabled through the filter option.

In this example the data is loaded from a remote JSON in the following format: { "value": "FJ", "group": "F", "text": "Fiji" } and the flags are loaded from our server. For your implementation you should embed the list and flags into your own page.

For the image & text rendering use a custom item template.

Get started with this example

Preview in full screen

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

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myData = ref([])

onMounted(() => {
  getJson('https://trial.mobiscroll.com/content/countries.json', (resp) => {
    const countries = []
    for (let i = 0; i < resp.length; ++i) {
      const country = resp[i]
      countries.push({ text: country.text, value: country.value })
    }
    myData.value = countries
  })
})
</script>

<template>
  <MbscPage>
    <MbscSelect
      :data="myData"
      :itemHeight="40"
      label="Countries"
      display="anchored"
      inputStyle="box"
      labelStyle="stacked"
      placeholder="Please select..."
    >
      <template #item="item">
        <div class="md-country-picker-item">
          <img
            class="md-country-picker-flag"
            :src="'https://img.mobiscroll.com/demos/flags/' + item.data.value + '.png'"
          />
          {{ item.display }}
        </div>
      </template>
    </MbscSelect>
  </MbscPage>
</template>

<style>
.md-country-picker-item {
  position: relative;
  line-height: 20px;
  padding: 10px 0 10px 40px;
}

.md-country-picker-flag {
  position: absolute;
  left: 0;
  height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-country-picker-item {
  transform: scale(1.1);
}
</style>

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

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myData = ref<any>([])

onMounted(() => {
  getJson('https://trial.mobiscroll.com/content/countries.json', (resp: any) => {
    const countries = []
    for (let i = 0; i < resp.length; ++i) {
      const country = resp[i]
      countries.push({ text: country.text, value: country.value })
    }
    myData.value = countries
  })
})
</script>

<template>
  <MbscPage>
    <MbscSelect
      :data="myData"
      :itemHeight="40"
      label="Countries"
      display="anchored"
      inputStyle="box"
      labelStyle="stacked"
      placeholder="Please select..."
    >
      <template #item="item">
        <div class="md-country-picker-item">
          <img
            class="md-country-picker-flag"
            :src="'https://img.mobiscroll.com/demos/flags/' + item.data.value + '.png'"
          />
          {{ item.display }}
        </div>
      </template>
    </MbscSelect>
  </MbscPage>
</template>

<style>
.md-country-picker-item {
  position: relative;
  line-height: 20px;
  padding: 10px 0 10px 40px;
}

.md-country-picker-flag {
  position: absolute;
  left: 0;
  height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-country-picker-item {
  transform: scale(1.1);
}
</style>