如何让Vue中多选v-autocomplete的第二个选项默认选中（含重载）

核心方案 #

要实现「选床位加载Charges后默认选中第二个选项，页面刷新仍保留，且不限制用户后续修改」的需求，需从数据加载时的默认选中赋值和选中状态持久化两部分处理：

具体实现步骤 #

1. 加载Charges后设置默认选中项 #

在updateBeds方法中，获取到Charges数据后，直接将数组第二个元素（索引为1）加入选中集合，同时避免重复添加：

async updateBeds(selectedBed) {
  // 调用接口获取对应床位的charges数据
  const chargesRes = await this.$api.getChargesByBed(selectedBed.id);
  this.chargesOptions = chargesRes.data;

  // 确保数据长度足够，再设置默认选中第二个选项
  if (this.chargesOptions.length >= 2) {
    const defaultCharge = this.chargesOptions[1];
    // 初始化选中集合，若需保留用户之前的选择，可改为判断后追加
    this.selectedCharges = [defaultCharge];
    // 追加逻辑示例：
    // if (!this.selectedCharges.some(item => item.id === defaultCharge.id)) {
    //   this.selectedCharges.push(defaultCharge);
    // }
  }

  // 把选中状态存到本地存储，页面刷新后可恢复
  localStorage.setItem('selectedCharges', JSON.stringify(this.selectedCharges));
}

2. 页面刷新后恢复选中状态 #

在组件的created钩子中，读取本地存储的保存值，恢复选中状态：

created() {
  const savedCharges = localStorage.getItem('selectedCharges');
  if (savedCharges) {
    this.selectedCharges = JSON.parse(savedCharges);
    // 如果chargesOptions是页面初始化时异步加载的，需匹配数据项：
    // this.selectedCharges = JSON.parse(savedCharges).map(savedItem => {
    //   return this.chargesOptions.find(opt => opt.id === savedItem.id) || savedItem;
    // });
  }
}

3. 组件模板配置 #

确保v-autocomplete正确开启多选、绑定数据：

<v-autocomplete
  v-model="selectedCharges"
  :items="chargesOptions"
  multiple
  label="选择费用项"
  item-text="name"
  item-value="id"
  return-object
></v-autocomplete>

关键注意点 #

• 必须先判断chargesOptions长度≥2，避免数组越界报错
• 用localStorage做状态持久化，若需跨设备同步，可改为存入后端接口
• 默认选中后不限制用户操作，用户可自由添加/删除其他选项

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