javascript - 是否可以通过单击vuejs中的列表项来更改图标的颜色？

我正在VueJS中创建一个下拉菜单，我想显示一个图标，然后单击该图标，将打开一个带有其他3个图标的下拉菜单。通过单击这些图标之一，我希望下拉菜单图标更改。我已经实现了所有这一切，唯一似乎不起作用的是我无法动态更改图标的颜色(一个图标是绿色，一个图标是灰色，一个图标是红色)。
我认为这是因为Vue不允许我将颜色设置为变量。

这是我的菜单代码:

    <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>

这是我的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>

任何帮助表示赞赏。 :-)

最佳答案

将图标颜色设置为变量，然后在每个函数中将该变量更改为期望的颜色。

我这样做的方法是将myIcon转换为具有name, color属性的对象。

我将颜色存储为对象，以方便选择。

然后，我附加了每个v-icon的颜色以使用适当的colors Object属性。

在每个图标的click事件中，我更改了myIcon.name和myIcon.color。

即

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

确保在color Prop 的前面加一个冒号(:)以使其具有反应性，并使用变量而不是文本-<v-icon :color="colors.green" ...>。

然后在您的激活器图标<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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

关于javascript - 是否可以通过单击vuejs中的列表项来更改图标的颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59106670/