可扩展面板中的自定义图标在 Vuetify 3 中无法按预期工作

Question

问题陈述：自定义

down

和

up

箭头图标在手动展开/折叠面板时无法按预期工作。

要求： 由于 Vuetify 在 Expandable-panel-title 的末尾提供默认箭头图标，我想在面板标题文本之前添加这些图标。我能够成功地做到这一点，但我在展开/折叠面板时更改这些图标的状态时面临问题。

使用默认图标，它工作正常。这里是游乐场

link

。

使用自定义图标，它不起作用。这里是游乐场

link

。

Answer 1

您从未在代码中切换数据

isAllExpended

，您的变量将始终为假。

我添加了

@click

并切换了

isAllExpended

，它起作用了。像这样：

<v-expansion-panels v-model="panel" multiple>
  <v-expansion-panel value="bar" @click="isAllExpended = !isAllExpended"> //here
    <v-expansion-panel-title expand-icon="">
      <template v-slot:actions="{ expanded }">
        <v-icon :icon="expanded ? '' : ''"></v-icon>
      </template>
      <v-icon v-show="isAllExpended">mdi-chevron-up</v-icon>
      <v-icon v-show="!isAllExpended">mdi-chevron-down</v-icon>
      Bar
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      Bar panel text
    </v-expansion-panel-text></v-expansion-panel>
</v-expansion-panels>