如何删除 vuetify 上传的 3 个文件中的 1 个文件？

Posted 2023-02-22

【中文标题】如何删除 vuetify 上传的 3 个文件中的 1 个文件？

【英文标题】：How to delete 1 file on 3 files uploaded on vuetify?

【发布时间】：2020-05-28 22:15:04

【问题描述】：

我阅读了文档：https://vuetifyjs.com/en/components/file-inputs#selection-slot

我的代码是这样的：

<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张图片

我该怎么做？

【参考方案1】：

使用处理程序方法配置要删除的芯片。

在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)
    ,
  
)

【讨论】：

感谢您提出的解决方案。像魅力一样工作。