Vuetify自动完成组件无法按预期构建问题求助

针对你的需求，只需要对代码做两处修改就能实现：

1. 初始化v-model绑定的变量，设置默认值
2. 添加禁用手动输入的属性

修改后的完整代码如下：

<v-autocomplete
  v-model="room"
  :items="rooms"
  label="room"
  readonly="true"
></v-autocomplete>

data() {
  return {
    rooms: ['1 Room', '2 Rooms', '3 Rooms'],
    room: '1 Room' // 设置默认选中第一项
  };
},

关键修改说明： #

• 设置默认值：在data里给room赋值为'1 Room'，和选项列表里的第一个值匹配，页面加载时就会自动选中该选项。
• 禁止手动输入：添加readonly="true"属性，这个属性会让输入框无法手动输入内容，但依然保留点击下拉选择选项的功能，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Peter