[英]Change Accordion icon dynamically in Vue
I have made an expansion panel in Vue using Vuetify.我使用 Vuetify 在 Vue 中制作了一个扩展面板。 I am using firestore to populate data in the panels and I have also given a button to "mark as complete" in the panels.我正在使用 firestore 在面板中填充数据,并且我还在面板中提供了一个“标记为完整”的按钮。 My firestore query works just fine and the data gets updated.我的 firestore 查询工作正常,数据得到更新。 What I am not able to get done is change the background color or change the icon of the drop-down panels which is by default set to down arrow, after my database update as a form of graphical feedback to the user.我无法完成的是更改背景颜色或更改下拉面板的图标,该图标默认设置为向下箭头,在我的数据库更新为用户的图形反馈形式之后。
As you can see in the image above, I need the expanded panel to either change its icon to a check mark or the entire background color to go green once I click on the right green check mark at the bottom of the panel.如上图所示,单击面板底部右侧的绿色复选标记后,我需要扩展面板将其图标更改为复选标记或将整个背景颜色更改为 go 绿色。
I tried to set the color property of the panel headers dynamically but it doesn't work that way.我试图动态设置面板标题的颜色属性,但它不起作用。 Below is the code where I want it to work.下面是我希望它工作的代码。
methods: {
complete(id) {
db.collection("orders")
.doc(id)
.update({
status: "deliverd",
})
.then(() => {
console.log("sdf");
});
},
I assume you are using the v-expansion-panel
component from Vuetify.我假设您使用的是 Vuetify 的v-expansion-panel
组件。
Problem: Dynamically change the icon or the background-color of v-expansion-panel-header
问题:动态改变v-expansion-panel-header
的图标或背景颜色
Solution: The component offers a prop called expand-icon
which allows to change the icon of the v-expansion-panel-header
- or via action
slot解决方案:该组件提供了一个名为expand-icon
的道具,它允许更改v-expansion-panel-header
的图标 - 或通过action
槽
<v-expansion-panel-header expand-icon="mdi-check" disable-icon-rotate>
Item
</v-expansion-panel-header>
<v-expansion-panel-header :expand-icon="icon" disable-icon-rotate>
Item
</v-expansion-panel-header>
<v-expansion-panel-header disable-icon-rotate>
Item
<template v-slot:actions>
<v-icon color="teal">
mdi-check
</v-icon>
</template>
</v-expansion-panel-header>
<v-expansion-panel-header disable-icon-rotate>
Item
<template v-slot:actions>
<v-icon color="teal">
{{ icon }}
</v-icon>
</template>
</v-expansion-panel-header>
Please note the use of disable-rotate-icon
to disable icon rotation when the expansion panel opens.请注意使用disable-rotate-icon
在展开面板打开时禁用图标旋转。
If you're not sure how this should be applied using Vue I suggest reading a quick Getting Started guide.如果您不确定如何使用 Vue 应用它,我建议您阅读快速入门指南。 However I drafted a quick example using the vuetify components in this CodeSandbox Example .但是,我在此CodeSandbox Example中使用 vuetify 组件起草了一个快速示例。 Please see this example just as a pointer, there would be 100 of ways how to implement this in an app.请将此示例仅视为一个指针,将有 100 种方法如何在应用程序中实现它。 Like this, it's not meant to use in production code.像这样,它不打算在生产代码中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.