I am creating a Dropdown-Menu in VueJS, I want to show an icon and by clicking on this icon a Dropdown-Menu with 3 other icons opens.(我正在VueJS中创建一个下拉菜单,我想显示一个图标,然后单击该图标,将打开一个带有其他3个图标的下拉菜单。)
By clicking on one of these icons, I want the Dropdown-Menu-Icon to change.(通过单击这些图标之一,我希望下拉菜单图标更改。) I have already achieved all this, the only thing that doesn't seem to work is that I can't dynamically change the color of the icon (one icon is green, one is grey and one is red).(我已经实现了所有这一切,唯一似乎不起作用的是我无法动态更改图标的颜色(一个图标是绿色,一个图标是灰色,一个图标是红色)。) I think that's because Vue doesn't let me set the color to a variable.(我认为这是因为Vue不允许我将颜色设置为变量。)
This is my Code 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>
</template>
And this is my Javascript code:(这是我的Javascript代码:)
<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>
Any help is appreciated.(任何帮助表示赞赏。)
:-)(:-))
ask by Ckuessner translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…