When the user clicks to open the dropdown, the v-select v-model value is displayed broken into new lines at spaces.
I have attempted to use styling (white-space) and also considered converting the string to an array and looping through it, but that feels like too much effort. My tech stack includes JS, https://vue-select.org/, and Vue, without Vuetify's v-select implementation.
Here is my data:
data: () => ({
selectedTitle: "Job Title"
}),
The v-select component:
<v-select
class="job-title-select"
:options="titles"
v-model="selectedTitle"
@change="(entry) => this.updateCriteria(entry, 'Job Title')"
taggable/>
Note: The updateCriteria() function sends data to the store, which does not impact the display or local value changes of the v-select. Only the v-model handles those changes.
Expected behavior: When clicking on the v-select, I expect to see the value displayed as "Job Title", "Director of Stuff" on a single line.
Actual result: Upon expanding/clicking the dropdown, the title appears as follows (these are titles, not dropdown items):
Job
Title
Director
Of
Stuff