代码之家 › 专栏 › 技术社区 › Anuj Kaithwas

在Vue中动态更改According图标

vuetify.js vue.js javascript

Anuj Kaithwas · 技术社区 · 5 年前

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

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

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

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

0 回复 | 直到 5 年前

tony19 thanksd 4 年前

我假设你正在使用 v-expansion-panel component 来自Vuetify。

问题: 动态更改图标或背景颜色 v-expansion-panel-header

解决方案: 该组件提供了一个名为 expand-icon 这允许更改图标 v型膨胀板机头 -或通过 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 导游。然而,我使用本文中的vuetify组件起草了一个快速示例 CodeSandbox Example 。请将此示例视为指针,在应用程序中实现此功能的方法有100种。像这样,它不是用来在生产代码中使用的。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前