如何解决当我在v扩展面板中删除一个时,它将为我打开下一个如何撤消
扩展面板,当我从阵列中删除一个面板时,它会自动为我打开下一个面板。 我该如何撤消呢? 谢谢
<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
,以保持面板关闭。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。