在 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 种方法如何在应用程序中实现它。像这样，它不打算在生产代码中使用。