Search code examples
javascriptvue.jsv-select

Why is the title (a string) of my v-select being broken into newlines at the spaces?

The v-select v-model value is broken into new lines at spaces when user clicks to open dropdown.

I have tried styling (white-space) to solve the issue. I've also tried changing the string to an array and looping through the array but that seems like overkill. I am using JS, https://vue-select.org/ and Vue. I am not using Vuetify's v-select.

My data:

data: () => ({
    selectedTitle: "Job Title"
}),

The v-select:

<v-select
    class="job-title-select"
    :options="titles"
    v-model="selectedTitle"
    @change="(entry) => this.updateCriteria(entry, 'Job Title')"
    taggable/>

Note: updateCriteria() is sending data to the store. It doesn't affect the v-select display or local value changes. v-model does.

Expected: I should see the value as "Job Title", "Director of Stuff", on one line when the user clicks on the v-select.

Outcome: When user expands/clicks on dropdown, this is what appears as the title for the dropdown element (these are not dropdown items): 

Job
Title

Director
Of
Stuff
Solution

  • It turns out that vue-select has conflicts with Bulma. I removed Bulma as a dependency and everything was fine.

    https://github.com/sagalbot/vue-select/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+bulma