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

Question

我在文档上阅读：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张图片

我该怎么办？

Answer 1

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

• 向v-chip添加'close'属性以获取每个文件上的关闭按钮

• 向芯片添加处理程序，传递索引（如果需要提示，还可以输入文本）

• （（可选）删除VFileInput上的清除所有按钮以防止用户混淆

模板

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

Component

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