0

My plugin (vue-select@latest) I can successfully get data from the object cities but how do I add a value , for example <span class="selected-tag" value="Moscow" or value="New York">

enter image description here

I'm new to Vue js , I want to use the plugin vue-select , my problem is that I can not add the value attribute. My attempts fail 

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

I create a dynamic combobox from the object cities: ['Moscow', 'Sp', 'Tomsk' , 'Voronezh', 'Novossibirsk'],

and I want all the data from the combobox to attribute value, for Example 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']

      }
    ]
  },

link to codepen My cdn libary

    <script src="https://unpkg.com/vue-select@latest"></script>
frontend33
  • 61
  • 1
  • 2

1 Answers1

0

First of all, the options property needs to be an string array or a plain object array with "label" and "value" properties.

You can try this:

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

It will show you a select with the name of your locations.

Jorgeblom
  • 3,330
  • 1
  • 23
  • 24