- adjust default codepen theme - update github edit base - doc content overhaul up to localization
1.3 KiB
Dropdown Options
vue-select accepts arrays of strings or objects to use as options through the options prop:
<v-select :options="['foo','bar']"></v-select>
When provided an array of objects, vue-select will display a single value of the object. By default, vue-select will look for a key named label on the object to use as display text.
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
Option Labels
When the options array contains objects, vue-select looks for the label key to display by default. You can set your own label to match your source data using the label prop.
For example, consider an object with countryCode and countryName properties:
{
countryCode: "CA",
countryName: "Canada"
}
If you wanted to display Canada in the dropdown, you'd use the countryName key:
<v-select label="countryName" :options="countries"></v-select>
Null / Empty Options
vue-select requires the option property to be an array. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an array to the options prop. If you need a null/empty value, use an empty array [].