Vue2中如何在Vuetify v-autocomplete中关联两个数组

核心问题在于v-autocomplete多选组件的v-model需要绑定选中项的value数组，但你直接绑定了布尔类型的SelectedDays数组，类型不匹配导致无法正确关联选中状态。我们可以通过计算属性做双向桥接，实现布尔数组和选中索引数组的互相转换。

步骤1：添加双向计算属性 #

在Vue组件的computed选项中添加一个计算属性，负责在SelectedDays布尔数组和v-autocomplete需要的选中索引数组之间转换：

computed: {
  selectedDayValues: {
    get() {
      // 从布尔数组中筛选出选中的星期索引（对应scheduleDays的Value）
      return this.editedReleaseSchedule.ScheduleInterval.SelectedDays
        .map((isSelected, index) => isSelected ? index : null)
        .filter(val => val !== null);
    },
    set(newSelectedValues: number[]) {
      // 先重置布尔数组为全未选中状态
      this.editedReleaseSchedule.ScheduleInterval.SelectedDays = Array(7).fill(false);
      // 根据新选中的索引设置对应位置为true
      newSelectedValues.forEach(val => {
        if (val >= 0 && val < 7) {
          this.editedReleaseSchedule.ScheduleInterval.SelectedDays[val] = true;
        }
      });
    }
  }
}

步骤2：修改v-autocomplete组件绑定 #

将组件的v-model改为绑定上述计算属性，同时修正item-value的返回值（不要转成字符串，保持数字类型，避免类型不匹配）：

<v-autocomplete
    v-model="selectedDayValues"
    :items="scheduleDays"
    :item-text="item => item.Text"
    :item-value="item => item.Value" <!-- 直接返回数字类型的索引 -->
    :label="'ADMINISTRATION_RELEASE_SCHEDULE_DETAILS_SCHEDULED_DAYS' | translate('Selected days')"
    :disabled="formDisabled"
    :rules="[rules.required]"
    outlined
    hide-details
    multiple
    dense
/>

关键注意事项 #

1. 确保scheduleDays的Value值（0-6）和SelectedDays数组的索引完全对应，这是转换的核心依据
2. 移除item-value中的字符串转换（${item.Value}），保持数字类型，否则会因类型不匹配导致选中状态无法正确同步
3. 如果SelectedDays被声明为readonly，需要去掉该修饰符，因为我们需要在计算属性的setter中修改它的状态

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