Как удалить 1 файл из 3 файлов, загруженных на vuetify?

Question

Я читаю в документах: https://vuetifyjs.com/en/components/file-inputs#selection -слот

Мой код такой:

<v-file-input
  v-model="files"
  placeholder="Upload your documents"
  label="File input"
  multiple
  prepend-icon="mdi-paperclip"
>
  <template v-slot:selection="{ text }">
    <v-chip
      small
      label
      color="primary"
    >
      {{ text }}
    </v-chip>
  </template>
</v-file-input>

Мой код: https://codepen.io/positivethinking639/pen/vYONqKa?editable=true&editors=101

При загрузке 3 изображений и удалении будут удалены все изображения. Я хочу, чтобы пользователь мог удалить 1 изображение по своему выбору. Таким образом, пользователь может удалить 1 изображение

Как я могу это сделать?

Answer 1

Сконфигурируйте чипы для удаления с помощью метода-обработчика.

• Добавьте атрибут 'close' в v-chip, чтобы получить кнопку закрытия для каждого файла

• Добавить обработчик в микросхему, передавая индекс (и текст, если вы хотите запросить)

• (необязательно), удалите кнопку очистки всех данных на VFileInput, чтобы избежать путаницы

Шаблон

<v-file-input
  ...
  :clearable="false"
>
  <template v-slot:selection="{ index, text }">
    <v-chip
      ...
      close
      @click:close="deleteChip(index, text)"
    >
      {{ text }}
    </v-chip>
  </template>

Компонент

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    files: [],
  }),
  methods: {
    deleteChip(index, text) {
      // Prompt here with text if required
      this.files.splice(index, 1)
    },
  }
})