vue.js - 如何删除 vuetify 上传的 3 个文件中的 1 个文件?
问题描述
我在文档上阅读: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张图片
我该怎么做?
解决方案
使用处理程序方法配置要删除的芯片。
添加“关闭”属性以
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)
},
}
})
推荐阅读
- ios - 在不包括 Swift Runtime 的情况下使用 NS_REFINED_FOR_SWIFT
- javascript - AngularJS 对象应该独立工作
- google-app-engine - App Engine Flex - 设置 GCP 网络标签
- java - 查找二维数组中的每个数字是否都是唯一的?
- azure-iot-hub - 无法将特定设备连接到 Azure IoT 中心
- android - 从手表向父应用发送 Hello World 时出现问题
- c# - 在 ASP.NET 中使用 JSON 和 AJAX 从 SQL 数据库中检索数据
- c# - ItemSelectionChanged 未调用命令操作 (Xceed.Wpf.Toolkit) - MVVM
- android - Android - 通过意图安装 APK - 对失败做出反应
- python - 从子类继承的属性打印子对象而不是来自父类的字符串