vue.js - Vue：选择后vue-select中的下拉框不显示值

Question

我正在从返回存储对象数组的计算方法填充下拉列表。然后在 vue-select 中，我将其作为options并option.address在下拉列表中显示。这按预期工作，但是当单击下拉选项时，该框不显示该值 - 它只是保持空白。

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>

Answer 1

您可以使用label显示address而不是插槽

<v-select
    v-model="selectedPickupLocation"
    :options="storeLocationsArray"
    label="address"
>
</v-select>