在 Vue 中动态更改手风琴图标

Question

我使用 Vuetify 在 Vue 中制作了一个扩展面板。我正在使用 firestore 在面板中填充数据，并且我还在面板中提供了一个按钮以“标记为完成”。我的 firestore 查询工作正常，数据得到更新。我无法完成的是更改背景颜色或更改默认设置为向下箭头的下拉面板的图标，在我的数据库更新后作为图形反馈给用户。

如上图所示，我需要展开的面板将其图标更改为复选标记，或者在单击面板底部右侧的绿色复选标记后将整个背景颜色更改为绿色。

我尝试动态设置面板标题的颜色属性，但它不起作用。下面是我希望它工作的代码。

methods: {
    complete(id) {
      db.collection("orders")
        .doc(id)
        .update({
          status: "deliverd",
        })
        .then(() => {
          console.log("sdf");
        });
    },

Answer 1

我假设您使用的是 Vuetify 的 v-expansion-panel component。

问题：动态改变v-expansion-panel-header

的图标或背景颜色

解决方案：该组件提供了一个名为 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>

请注意使用 disable-rotate-icon 在扩展面板打开时禁用图标旋转。

---

如果您不确定如何使用 Vue 应用此功能，我建议您阅读快速 Getting Started 指南。但是，我在此 CodeSandbox Example 中使用 vuetify 组件起草了一个快速示例。请将此示例视为一个指针，在应用程序中将有 100 种方法可以实现这一点。像这样，它不打算在生产代码中使用。