Файл загрузки документа, содержащий параметр выбора

У меня есть файл загрузки документа из нескольких загрузок, который отображает имя файла и параметр выбора, где пользователь должен выбрать тип документа для загруженного файла. Функция загрузки работает нормально, но есть проблема с опцией выбора. Поскольку в загруженном файле есть цикл for, всякий раз, когда я выбираю вариант типа документа, значение изменяется для всех выбранных типов документов.

<input
  ref = "filebtn"
  type = "file"
  multiple
  @input = "upload"
/>

<div
   v-for = "file in files"
   :key = "file.name"
>
 <div class = "d-flex justify-space-between">
   <div>
     {{ file.name }}
   </div>
 </div>
 <div v-if = "files.length >= 1">
   <v-select
     v-model = "documentTypeModel"
     :items = "documentType"
   ></v-select>
 </div>
</div>

И сценарий

props: {
  multiple: {
      type: Boolean,
      required: false,
  },
},
data() {
  return {
     documentTypeModel: null,
     documentType: [
       'Item 1',
       'Item 2',
       'Item 3',
     ],
  }
},
computed: {
   filebtn: {
     cache: false,
     get() {
       return this.$refs.filebtn
     },
  },
}
methods: {
  upload() {
     const files = this.filebtn.files ?? []
      for (let i = 0; i < files.length; i++) {
         if (this.multiple) {
             // eslint-disable-next-line vue/no-mutating-props
             this.files.splice(0, this.files.length)
         }
     }
  },
}

javascript html vuejs2 nuxt.js vuetify.js

23.11.2022 18:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте использовать индекс из цикла в v-модели:

new Vue({
  el: '#demo',
  vuetify: new Vuetify(),
  data() {
    return {
       documentTypeModel: [],
       documentType: [
         'Item 1',
         'Item 2',
         'Item 3',
       ],
       multiple: true,
       files: []
    }
  },
  computed: {
     filebtn: {
       cache: false,
       get() {
         return this.$refs.filebtn
       },
    },
  },
  methods: {
    upload() {
      this.files = [...this.filebtn.files] ?? []
      for (let i = 0; i < this.files.length; i++) {
        if (this.multiple) {
           this.files = this.files.splice(0, this.files.length)
        }
      }
    },
  }
})

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id = "demo">
  <v-app>
    <v-main>
      <v-container>
        <input
          ref = "filebtn"
          type = "file"
          multiple
          @input = "upload"
        />
        <div
           v-for = "(file, i) in files"
           :key = "file.name"
        >
         <div class = "d-flex justify-space-between">
           <div>
             {{ file.name }}
           </div>
         </div>
         <v-select
           v-model = "documentTypeModel[i]"
           :items = "documentType"
         ></v-select>
        </div>
      </v-container>
    </v-main>
  </v-app>
</div>

23.11.2022 21:03

Другие вопросы по теме

Проблема с размещением pdf с полной страницей без полей

OBJLoader ничего не отображает

Как нацелить ссылку на данные с определенным значением и добавить стиль с помощью javascript

Как использовать Markdown со ссылками в JSF?

Имейте 2 типа размера в шрифте значка Google

Как сделать, чтобы индикатор выполнения не переполнялся в навигационной панели?

Как вставить элементы HTML в файл HTML с помощью VBA

Изменить параметр при выборе ввода, нажав кнопку

Как получить html-форму, обработать ее с помощью py-скрипта и отобразить на экране?

Не удается найти интересующие ссылки с помощью BeautifulSoup

Файл загрузки документа, содержащий параметр выбора

Ответы 1

Другие вопросы по теме

Похожие вопросы