javascript - 是否可以通过单击vuejs中的列表项来更改图标的颜色？(Is there a way to change the color of an icon by clicking on a list-item in vuejs?)

Question

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

Answer 1

Set the icon color to a variable and change that variable to the expected color in each of your functions.(将图标颜色设置为变量，然后在每个函数中将该变量更改为期望的颜色。)

The way I did this was to convert myIcon to an Object with properties for name, color .(我这样做的方法是将myIcon转换为具有name, color属性name, color的对象。)

I stored the colors as an Object for easy selection.(我将颜色存储为对象以便于选择。)

Then I attached the color of each v-icon to use the appropriate colors Object property.(然后，我附加了每个v-icon的颜色，以使用适当的colors Object属性。)

In the click event for each icon, I change the myIcon.name and myIcon.color .(在每个图标的点击事件中，我更改myIcon.name和myIcon.color 。)

ie(即)

changeSupplierStatusToUp() {
  this.myIcon.name = 'mdi-chevron-up';
  this.myIcon.color = this.colors.green;
}

Ensure you preface the color prop with a colon ( : ) to make it reactive and to use a variable instead of text -- <v-icon :color="colors.green" ...> .(确保你前言color支柱用冒号（ : ），使之有反应性的，并且使用可变的，而不是文本- <v-icon :color="colors.green" ...>)

Then in your activator icon, <v-icon x-large :color="myIcon.color">{{ myIcon.name }}</v-icon> .(然后在激活器图标中， <v-icon x-large :color="myIcon.color">{{ myIcon.name }}</v-icon> 。)

 const app = new Vue({ el: '#app', vuetify: new Vuetify(), name: "Selection", data() { return { myIcon: { name: 'mdi-unfold-less-vertical', color: 'default' }, colors: { green: 'green', grey: 'grey', red: 'red' } } }, props: {}, computed: { }, methods: { changeSupplierStatusToUp() { this.myIcon.name = 'mdi-chevron-up'; this.myIcon.color = this.colors.green; }, changeSupplierStatusToDown() { this.myIcon.name = 'mdi-chevron-down'; this.myIcon.color = this.colors.red; }, changeSupplierStatusToMid() { this.myIcon.name = 'mdi-unfold-less-vertical'; this.myIcon.color = this.colors.grey; } } }); 

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> <div id="app"> <v-app> <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="myIcon.color" >{{ myIcon.name }}</v-icon> </v-btn> </template> <span>Steady</span> </v-tooltip> </template> <v-list> <v-list-item> <v-icon x-large :color="colors.green" @click="changeSupplierStatusToUp()" >mdi-chevron-up</v-icon> </v-list-item> <v-divider></v-divider> <v-list-item> <v-icon x-large :color="colors.grey" @click="changeSupplierStatusToMid()" >mdi-unfold-less-vertical</v-icon> </v-list-item> <v-divider></v-divider> <v-list-item> <v-icon x-large :color="colors.red" @click="changeSupplierStatusToDown()" >mdi-chevron-down</v-icon> </v-list-item> </v-list> </v-menu> </v-toolbar> </v-card> </v-app> </div>