How to use two arrays in Vuetifyes v-autocomplete

Question

I have two arrays, one with 7 boolean values representing the weekdays, and the other with the weekdays names and the value of which day of the week it represents, kind of index of weekdays (0 beeing sunday, and 6 beeing saturday)

This sample is from the ts file belonging to the vue file where the autocomplete is.

export const scheduleDays: TextValueViewModel[] = [
    { Text: "Mon", Value: 1},
    { Text: "Tue", Value: 2 },
    { Text: "Wed", Value: 3 },
    { Text: "Thu", Value: 4 },
    { Text: "Fri", Value: 5 },
    { Text: "Sat", Value: 6 },
    { Text: "Sun", Value: 0 }
];

This is from a view model I have containing this array with booleans representing the weekdays.

public readonly SelectedDays: boolean[] = [false,false,false,false,false,false,false];

I then have a autocomplete where I want to save the clicked checkboxes and that would be saved into the boolean array

<v-autocomplete
    v-model="editedReleaseSchedule.ScheduleInterval.SelectedDays"
    :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
/>

How can I make the clicked value of the weekday array beeing saved into the boolean array in the right index spot? And at the same time I want the correct checkboxes be checked in the autocomplete field.

The implemented auto complete in the interface

Using Vue 2 at my workplace, so no solution for vue 3 would work out for me.

I've tried to google if I can get the index of the v-autocomplete row and use that in item-value like:

editedReleaseSchedule.ScheduleInterval.SelectedDays[index]

but that does not seem possible. I've also tried different ways of filtering before using v-autocomplete, but I still want the whole list, not only the clicked (marked) once.

Answer 1

Use an intermediate model for the selectedValues, watch it, and map the selected values ([1,2,3...,0]) into the real model.

data: () => ({
  selectedValues: [],
  // ...

<v-autocomplete
  v-model="selectedValues"
  <!-- etc -->


watch: {
  selectedValues(newValues) {
    const allFalse = [false,false,false,false,false,false,false];
    this.editedReleaseSchedule.ScheduleInterval.SelectedDays = allFalse;
    newValues.forEach(value => {
      // presumes sunday is the last index, the others are offset by +1
      let j = value === 0 ? 6 : value-1;
      this.editedReleaseSchedule.ScheduleInterval.SelectedDays[j] = true;
    })
  },