VueJS中点击列表项动态修改图标颜色的实现求助

我帮你搞定这个颜色绑定的问题！核心思路很简单：把图标颜色也做成响应式变量，和你现有的myIcon同步更新就行，现在一步步来调整代码：

具体步骤 #

1. 添加颜色响应式变量 #

在data里新增一个myIconColor，初始值对应你默认的灰色图标：

data() {
  return {
    myIcon: 'mdi-unfold-less-vertical',
    myIconColor: 'grey' // 和默认图标颜色匹配
  }
}

2. 同步更新图标与颜色 #

你可以选择保留原有的三个方法，在每个方法里同步修改颜色；也可以优化成一个通用方法减少重复代码，这里推荐更简洁的通用方案：

methods: {
  // 替换原来的三个方法，直接接收图标和颜色参数
  changeSupplierStatus(icon, color) {
    this.myIcon = icon
    this.myIconColor = color
  }
}

3. 给激活图标绑定颜色 #

把激活按钮里的<v-icon>加上color属性绑定，关联到myIconColor：

<v-icon x-large :color="myIconColor">{{ myIcon }}</v-icon>

4. 更新下拉菜单的点击事件 #

把下拉里每个图标的点击事件改成调用通用方法，传入对应的图标和颜色：

<v-icon color="green" x-large @click="changeSupplierStatus('mdi-chevron-up', 'green')">mdi-chevron-up</v-icon>
<v-icon color="grey" x-large @click="changeSupplierStatus('mdi-unfold-less-vertical', 'grey')">mdi-unfold-less-vertical </v-icon>
<v-icon color="red" x-large @click="changeSupplierStatus('mdi-chevron-down', 'red')">mdi-chevron-down</v-icon>

修改后的完整代码 #

Template 部分 #

<template>
<v-card outlined>
<v-card-title>Selection</v-card-title>
<v-toolbar height="80" elevation="0">
<v-menu transition="slide-y-transition" nudge-left="9" nudge-bottom="10" offset-y>
<template v-slot:activator="{ on: menu }">
<v-tooltip right>
<template v-slot:activator="{ on:tooltip }">
<v-btn class="mb-6" v-on="{...tooltip, ...menu}" fab>
<v-icon x-large :color="myIconColor">{{ myIcon }}</v-icon>
</v-btn>
</template>
<span>Steady</span>
</v-tooltip>
</template>
<v-list>
<v-list-item>
<v-icon color="green" x-large @click="changeSupplierStatus('mdi-chevron-up', 'green')">mdi-chevron-up</v-icon>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-icon color="grey" x-large @click="changeSupplierStatus('mdi-unfold-less-vertical', 'grey')">mdi-unfold-less-vertical </v-icon>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-icon color="red" x-large @click="changeSupplierStatus('mdi-chevron-down', 'red')">mdi-chevron-down</v-icon>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar>
</v-card>
</template>

Script 部分 #

<script>
export default {
name: "Selection",
data() {
return {
myIcon: 'mdi-unfold-less-vertical',
myIconColor: 'grey'
}
},
props: {},
computed: {},
methods: {
changeSupplierStatus(icon, color) {
this.myIcon = icon
this.myIconColor = color
}
}
};
</script>
<style scoped></style>

这样修改后，点击下拉菜单里的任意图标，激活按钮的图标和颜色就会同步切换啦！

内容的提问来源于stack exchange，提问作者Ckuessner