vue.js - 如何修改自动完成以便我只能搜索 1 个单词？

Question

我的模板是这样的：

<v-autocomplete
        label="Components"
        :items="components"
      ></v-autocomplete>

我的组件是这样的：

  data () {
    return {
      components: [
        'Manchester United', 'Manchester City', 'Chelsea', 'Liverpool', 'Tottenham Hotspurs', 'Everton', 'Arsenal', 'AC Milan', 'Inter Milan', 'Real Madrid', 'Atletico Madrid',
      ],
    }
  },

演示和完整代码如下：

https://codepen.io/positivethinking639/pen/yLyKaZR?editors=1010

例如我输入“曼彻斯特”，它会显示曼彻斯特城和曼联

但我不想两者都选。我只想输入“曼彻斯特”这个词

怎么办？

更新：

我希望有 2 个选项。用户可以选择自动完成，用户也可以按关键字搜索

选项1：用户输入manchester，用户选择manchester united，用户点击搜索，搜索结果将显示数据manchester united

选项2：用户输入manchester，用户点击搜索，搜索结果将显示数据manchester united 和manchester city

标签： vue.jsvuejs2autocompletevue-componentvuetify.js