Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Using a v-list and v-icon in vutify – Why is my icon colour not working please

I am trying to store my icon colours as a data item but for some reason they are not being picked up. If I add a static colour color="red" for example works fine but below doesn’t, can anyone explain why please as I can’t figure it out

thanks

Gibbo

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<v-list>
    <v-list-item
      v-for="(item, i) in items"
      :key="i"
      :to="item.to"
      router
      exact
    >
      <v-list-item-action>
        **<v-icon :color="item.color">{{ item.icon }}</v-icon>**
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title v-text="item.title" />
      </v-list-item-content>
    </v-list-item>
  </v-list>

And my data items are

items: [
        {
          icon: 'mdi-apps',
          title: 'Home',
          to: '/',
          color: 'White'
        },
        {
          icon: 'mdi-note-text-outline',
          title: 'Overview',
          to: '/overview',
          color: 'Blue'
        },

>Solution :

The colors in vuetify have lowercase format :

items: [
        {
          icon: 'mdi-apps',
          title: 'Home',
          to: '/',
          color: 'white'
        },
        {
          icon: 'mdi-note-text-outline',
          title: 'Overview',
          to: '/overview',
          color: 'blue'
        },

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading