VueJs conditional class/style binding?

Question

I have a list item here on which i am looping to get a list of icons. Now i am trying to create a computed property such that if i am my $route.params.page === 'something' the first icon will get highlighted, if i am my $route.params.page === 'something else', the second icon gets highlighted and so on. But i am not sure how to go about it.

new Vue({
  el: '#app',
  data() {
    return {
      iconActions: [{
          icon: 'android'
        },
        {
          icon: 'dashboard'
        },
        {
          icon: 'book'
        },
        {
          icon: 'public'
        },
        {
          icon: 'timeline'
        }
      ],
    }
  },
  computed: {
    highlightIcon() {
      if (this.$route.params.page === 'something') {
        highlight 'first Icon'
      } else if (this.$route.params.page === 'something') {
        highlight 'second icon'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-list v-for="(icon,i) in iconActions" :key="`${i} - ${icon}`" :class="highlightIcon ? 'white--text bg-secondary' : ''">
      <v-list-tile>
        <v-icon>{{icon.icon}}</v-icon>
      </v-list-tile>
    </v-list>
  </v-app>
</div>

Here is a link to the pen

ssc-hrep3 · Accepted Answer · 2019-12-18 18:57:50Z

3

It's probably best to wrap everything inside the loop into its own component and pass the data in as a prop. If you do so, you'll have your own scope in this component where you can just have a regular computed() without many if/else checks.

For simple cases, you can also do your logic directly in the template:

<v-list v-for="(icon,i) in iconActions"
    :key="`${i} - ${icon}`"
    :class="{ 'white--text': $route.params.page === icon.icon }">
  <v-list-tile>
    <v-icon>{{icon.icon}}</v-icon>
  </v-list-tile>
</v-list>

answered Dec 18, 2019 at 18:57

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somethingwhatever Over a year ago

Thanks for the help!! This is kind of the approach i ended up taking eventually.

Loi Nguyen Huynh · Accepted Answer · 2019-12-18 18:49:42Z

Here's the code (not runnable because I don't have the full context btw).

The idea: get highlightIconIndex in computed, compare it with i in v-for by "the Vue conditional rendering" v-if v-else.

I don't quite sure what you mean about highlight, just give the code a look and see if it's what you want.

new Vue({
  el: '#app',
  data() {
    return {
      iconActions: [
        { icon: 'android' },
        { icon: 'dashboard' },
        { icon: 'book' },
        { icon: 'public' },
        { icon: 'timeline' }
      ],
    }
  },
  computed: {
    highlightIconIndex() {
      if (this.$route.params.page === 'something') {
        return 0;
      } else if (this.$route.params.page === 'something else') {
        return 1;
      }
    } 
  }
})

.highlight {
  background: red;
  color: yellow;
}

<div id="app">
  <v-app>
    <v-list v-for="(icon,i) in iconActions" :key="`${i} - ${icon}`">
      <v-list-tile>
        <v-icon v-if="i === highlightIconIndex" class="highlight">{{icon.icon}}</v-icon>
        <v-icon v-else>{{icon.icon}}</v-icon>
      </v-list-tile>
    </v-list>
  </v-app>
</div>

Collectives™ on Stack Overflow

VueJs conditional class/style binding?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related