0

I am populating a dropdown from a computed method that returns an array of store objects. Then in the vue-select, I am passing this in as options and having the option.address show in the dropdown. That is working as expected but when clicking a dropdown option, the box doesn't show the value -- it just remains blank.

computed: {
   storeLocationsArray: function() {
    let arr = [];
    this.storeLocations.forEach((location,index) => {
        arr.push({id: index, address: location.address})
    })
    return arr;
   }
}


<v-select
    v-model="selectedPickupLocation"
    :options="storeLocationsArray"
>
    <template class="single-option" slot="option" slot-scope="option">
        {{option.address}}
    </template>
</v-select>
Phil
  • 157,677
  • 23
  • 242
  • 245
RohimL
  • 157
  • 1
  • 3
  • 13
  • 1
    Your app will be throwing warnings ~ _"[vue-select warn]: Label key "option.label" does not exist in options object"_. You should [read the documentation](https://sagalbot.github.io/vue-select/docs/Basics/Options.html#labels) – Phil Apr 04 '19 at 03:45

1 Answers1

2

You can use label to display address instead of slot

<v-select
    v-model="selectedPickupLocation"
    :options="storeLocationsArray"
    label="address"
>
</v-select>
ittus
  • 21,730
  • 5
  • 57
  • 57