To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to customize dropdowns.
Mixing Options
We can mix various kinds of options together.
For example, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" :options="options">
<template v-slot:first>
<b-form-select-option :value="null" disabled>choose one</b-form-select-option>
</template>
<b-form-select-option value="apple">Apple</b-form-select-option>
<b-form-select-option value="orange">Orange</b-form-select-option>
</b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null
};
}
};
</script>
v-slot:first means that it’ll end up in the first slot, which means it’ll be displayed above the rest.
We also have other options below it.
Options Properties
We can change the options by adding various properties.
The text property is displayed to the user.
Alternative, we can render HTML with the html prop.
However, if we choose to display HTML, then we’ve to be careful about cross-site scripting attacks since what’s displayed won’t be sanitized.
HTML isn’t rendered by all browsers.
The value property is set as the state.
disabled disables the option.
For instance, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" :options="options"></b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null,
options: [
{ value: null, text: "Select a Fruit" },
{ value: "apple", html: "<b>Apple</b>" },
{ value: "orange", text: "Orange" },
{ value: "grape", text: "Grape", disabled: true }
]
};
}
};
</script>
The value prop can be anything including objects.
The field names can be changed with the value-field and text-field props.
value-field lets us change the value field to something other than value ,
text-field lets us change the text field to something other than text .
For example, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" value-field="item" text-field="name" :options="options"></b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null,
options: [
{ item: null, name: "Select a Fruit" },
{ item: "orange", name: "Orange" },
{ item: "grape", name: "Grape" }
]
};
}
};
</script>
We set text-field to 'name' and value-field to 'item' so we can use the fields in the options like the display text and the value respectively.
Select Sizing
We can use the select-size prop to set the size of the select list box.
For instance, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" :select-size="5" :options="options"></b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null,
options: [
{ value: null, text: "Select a Fruit" },
{ value: "orange", text: "Orange" },
{ value: "grape", text: "Grape" }
]
};
}
};
</script>
Then we see a box that we can select items from instead of a dropdown.
Multiple Select
The multiple prop lets us add a select box where we can select multiple items.
For example, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" multiple :select-size="5" :options="options"></b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null,
options: [
{ value: null, text: "Select a Fruit" },
{ value: "orange", text: "Orange" },
{ value: "grape", text: "Grape" },
{ value: "apple", text: "Apple" }
]
};
}
};
</script>
The selected state’s value will be an array instead of a string.
We need to use multiple with the select-size prop to display the box.
Sizing
The size prop on the b-form-select component can control its size.
'sm' sets is to extra small.
'lg' sets it to be bigger than the default.
Autofocus
The autofocus prop lets us set the focus of the dropdown select.
Value Validation
Like other input controls, we can set the state prop to display the validation status of the dropdown.
For example, we can write:
<template>
<div id="app">
<b-form-select v-model="selected" :state="isValid" :options="options"></b-form-select>
<p>{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: null,
options: [
{ value: null, text: "Select a Fruit" },
{ value: "orange", text: "Orange" },
{ value: "grape", text: "Grape" },
{ value: "apple", text: "Apple" }
]
};
},
computed: {
isValid() {
return !!(this.selected && this.selected.length > 0);
}
}
};
</script>
We have the isValid computed property to check the this.selected state for the choice.
And we set that to the value of the state prop.
Then we’ll see everything green when a choice is picked and red otherwise.
Conclusion
There are many things we can do with dropdowns.
We can add a validation state display.
Also, we can change the size and the field options.
We can also allow users to pick multiple items at once.
