I am currently working on a VueJS Dropdown Menu implementation that involves displaying an icon. When this icon is clicked, a Dropdown Menu containing 3 other icons should appear. Furthermore, upon clicking one of these icons, I intend for the original Dropdown Menu icon to change as well. While I have successfully accomplished most of this functionality, there seems to be an issue with dynamically changing the color of the icon (one green, one grey, one red) due to what I suspect is Vue's limitation in setting colors via variables.
Below is the code snippet for the menu:
<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>{{ myIcon }}</v-icon>
</v-btn>
</template>
<span>Steady</span>
</v-tooltip>
</template>
<v-list>
<v-list-item>
<v-icon color="green" x-large @click="changeSupplierStatusToUp()">mdi-chevron-up</v-icon>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-icon color="grey" x-large @click="changeSupplierStatusToMid()">mdi-unfold-less-vertical</v-icon>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-icon color="red" x-large @click="changeSupplierStatusToDown()">mdi-chevron-down</v-icon>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar>
</v-card>Additionally, here is the relevant JavaScript code:
<script>
export default {
name: "Selection",
data() {
return {
myIcon: 'mdi-unfold-less-vertical',
}
},
props: {},
computed: {},
methods: {
changeSupplierStatusToUp() {
this.myIcon = 'mdi-chevron-up'
},
changeSupplierStatusToDown() {
this.myIcon = 'mdi-chevron-down'
},
changeSupplierStatusToMid() {
this.myIcon = 'mdi-unfold-less-vertical'
}
}
}
</script>
<style scoped></style>Your assistance in resolving this issue would be greatly appreciated. :-)