Как после перетаскивания превью фото менять исходный массив?

Question

[Vladimir185]

Всем привет. Использую Vuetify и Vue-draggable

<v-file-input
            chips
            show-size
            multiple
            truncate-length="15"
            accept="image/png, image/jpeg"
            label="Остальные фото"
            v-model="car.carImgs"
            :rules="allRules"
            @change="addImagesToPreview"
          ></v-file-input>
          <draggable v-model="previewImgs" class="d-flex flex-wrap">
            <v-col v-for="previewImg in previewImgs" :key="previewImg">
              <v-img :src="previewImg" max-height="150" max-width="250"></v-img>
            </v-col>
          </draggable>
          </draggable>

У меня есть инпут и превью фото. Я меняю местами фото в превью, как в инпуте согласно этим изменениям поменять местами фото? Какой-то изящный есть метод? Пока в голове только как-то запоминать индекс или имя при создании превью и согласно нему потом расставлять файлы

Метод добавления в превью

addImagesToPreview() {
      console.log(this.car.carImgs);
      this.previewImgs = this.car.carImgs.map((previewImg) =>
        URL.createObjectURL(previewImg)
      );
    },

Answer 1

[Vladimir185]

addImagesToPreview() {
      this.previewImgs = this.car.carImgs.map((previewImg) => ({
        link: URL.createObjectURL(previewImg),
        name: previewImg.name,
      }));
    },
    dragChange() {
      const previewImgsLinks = this.previewImgs.map(({ name }) => name);
      this.car.carImgs = this.car.carImgs.sort(
        (a, b) =>
          previewImgsLinks.indexOf(a.name) - previewImgsLinks.indexOf(b.name)
      );
    },

Сделал путем сортировки по имени