为什么我的 v-select 的标题（字符串）在空格处被换行？

Question

当用户点击打开下拉菜单时，v-select v-model 值在空格处被换行。

我已经尝试通过样式 (white-space) 来解决问题。我也尝试过将字符串更改为一个数组并循环遍历该数组，但这似乎有点矫枉过正。我正在使用 JS、https://vue-select.org/ 和 Vue。我没有使用 Vuetify 的 v-select。

我的数据：

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

v-select:

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

注意：updateCriteria() 正在向商店发送数据。它不影响 v-select 显示或本地值更改。 v-model 确实如此。

预期：当用户单击 v-select.

时，我应该在一行中看到 "Job Title"、"Director of Stuff" 的值

结果：当用户 expands/clicks 下拉时，下拉元素的标题显示为（这些不是下拉项）：

Job
Title

Director
Of
Stuff

Answer 1

原来vue-select和布尔玛有矛盾。我删除了 Bulma 作为依赖项，一切都很好。

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

为什么我的 v-select 的标题（字符串）在空格处被换行？

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

javascript

vue.js

v-select