vue.js - 当我在 v-expansion-panel 中删除一个时,它会为我打开下一个。如何撤消它
问题描述
扩展面板,当我从阵列中删除一个时,它会自动为我打开下一个。我怎样才能撤消它?谢谢
<v-expansion-panel
v-for="(Test, index) in Test"
:key="index">
<v-expansion-panel-header>
<template v-slot:actions>
<v-icon color="green">fa fa-check</v-icon>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn
text
color="primary"
@click="
delete(Test)
"
>delete</v-btn
>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
解决方案
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
active: null,
test: [1, 2, 3, 4, 5]
}),
methods: {
del(index) {
this.test.splice(index, 1)
this.active = null
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-expansion-panels v-model="active">
<v-expansion-panel v-for="(t, index) in test" :key="index">
<v-expansion-panel-header>
item
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn text color="red" @click="del(index)">delete{{t}}</v-btn>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-container>
</v-main>
</v-app>
</div>
使用value
道具:
控制扩展面板中内容的打开/关闭状态。对应于当前打开内容的从零开始的索引。
在每次删除后设置this.active = null
以保持面板关闭。
推荐阅读
- python - 按枢轴值Python对数据透视表进行排序
- amazon-s3 - S3 Bucket Stage 上的正则表达式 - 来自 Snowflake
- java - 什么是 Java 中的 std::variant
- azure-cognitive-search - 如何使用 Collection(Edm.String) 的现有“内容”字段索引 blob 内容?
- autodesk-forge - 翻译 IFC 故障
- angular - 发现 AnguIar 不兼容的对等依赖项
- android - Socket Service在Android中收到数据时出错
- curl - 为什么 curl sftp 在一台机器上失败并显示“curl:(60)SSL 对等证书或 SSH 远程密钥不正常”,但在另一台机器上却没有 - 同一主机
- c - 如何用 Xlib 切换焦点窗口
- python - 将python脚本的结果设置为makefile中的变量