<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<div id="app">
Выберите город :
<div>
<multiselect
v-model="value"
placeholder="city name?"
label="city" track-by="city_ascii"
:options="options"
></multiselect>
</div>
Выбран : {{value ? value.city : '' }}
</div>
body { font-family: 'Arial' } var app = new Vue({
el: '#app',
components: { Multiselect: window.VueMultiselect.default },
data () {
return {
value: [],
options: [
{
"city": "San Martin",
"city_ascii": "San Martin",
"lat": -33.06998533,
"lng": -68.49001612,
"pop": 99974,
"country": "Argentina",
"iso2": "AR",
"iso3": "ARG",
"province": "Mendoza",
"timezone": "America/Argentina/Mendoza"
},
{
"city": "San Nicolas",
"city_ascii": "San Nicolas",
"lat": -33.33002114,
"lng": -60.24000289,
"pop": 117123.5,
"country": "Argentina",
"iso2": "AR",
"iso3": "ARG",
"province": "Ciudad de Buenos Aires",
"timezone": "America/Argentina/Buenos_Aires"
},
{
"city": "San Francisco",
"city_ascii": "San Francisco",
"lat": -31.43003375,
"lng": -62.08996749,
"pop": 43231,
"country": "Argentina",
"iso2": "AR",
"iso3": "ARG",
"province": "Córdoba",
"timezone": "America/Argentina/Cordoba"
}
]
}
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.