Как добавить атрибут значение в мой Combobox, используя Vue Js?

Question

Мой плагин (vue-select @ latest) Я могу успешно получать данные из городов- объектов, но как мне добавить значение, например <span class="selected-tag" value="Moscow" or value="New York">

введите описание изображения здесь

Я новичок в Vue js, я хочу использовать плагин vue-select, моя проблема в том, что я не могу добавить атрибут value. Мои попытки провалились

 <v-select :options="locations" label="name" v-model="country" value="value" ></v-select>

Я создаю динамический комбобокс из городов-объектов: ['Москва', 'Сп', 'Томск', 'Воронеж', 'Новосибирск'],

и я хочу, чтобы все данные из выпадающего списка имели атрибут value, например, value="Moscow"

    let sample =new Vue({
  el: '#app',
  data: {
    country: null,
    city: null,
    locations: [
      {
        name: 'Russia',
        cities: ['Moscow', 'Sp', 'Tomsk' , 'Voronezh', 'Novossibirsk'],
        value: ['Moscow', 'Sp', 'Tomsk' , 'Voronezh', 'Novossibirsk']
      },
      {
        name: 'USA',
        cities: ['LA', 'Pensacola', 'New York'],
        value: ['LA', 'Pensacola', 'New York']

      }
    ]
  },

ссылка на codepen Моя библиотека cdn

    <script src="https://unpkg.com/vue-select@latest"></script>

Answer 1

Прежде всего, свойство options должно быть массивом строк или массивом простых объектов со свойствами "label" и "value".

Вы можете попробовать это:

<v-select :options="locations.map(i => i.name)" label="name" v-model="country"></v-select>

Он покажет вам выбор с названием вашего местоположения.