Loop using v-for in vuejs?

Question

I am trying to use v-for to loop through data which included title and icons. Right now I can get only one icon by looping through, My question is how can I get more than one icon when looping through?

I have made a codepen: https://codepen.io/anon/pen/MMaGOZ?&editable=true&editors=101. So basically in this example how can I get more than one icon. So if I also want a search icon alongside dashboard.

  <div id="app">
 <v-app id="inspire">
   <v-navigation-drawer
    class="blue lighten-3"
    dark
    permanent
   >
     <v-list>
       <v-list-tile
        v-for="item in items"
        :key="item.title"
        @click=""
       >
      <v-list-tile-action>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-tile-action>

      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

 new Vue({
  el: '#app',
  data () {
   return {
    items: [
      { title: 'Dashboard', icon: 'dashboard','search' },
      { title: 'Account', icon: 'account_box' },
     { title: 'Admin', icon: 'gavel' }
    ]
   }
 }
 })

If I do icon: 'dashboard', 'search' => This gives me an error message. Not sure how can I get this?

Thanks in advance.

In that case, you will need the icon property to be of Array type, e.g. { icon: [ 'dashboard', 'search' ] } — Yom T.
– Yom T., Commented Jun 14, 2019 at 5:12
So i would need to loop separately over a 2 dimensional array to get the icons? — Somethingwhatever
– Somethingwhatever, Commented Jun 14, 2019 at 5:14
Well, that would depend on how you use this multiple icons on the individual items. Maybe to toggle between states? — Yom T.
– Yom T., Commented Jun 14, 2019 at 5:21
Not really, just static icons for now will do. More for presentation really — Somethingwhatever
– Somethingwhatever, Commented Jun 14, 2019 at 5:22

Phil · Accepted Answer · 2019-06-14 05:27:50Z

6

As mentioned in the comments, { icon: 'dashboard', 'search' } is invalid and you'll want to use an array (or similar list / collection), eg

items: [
  { title: 'Dashboard', icon: ['dashboard','search'] },
  { title: 'Account', icon: ['account_box'] },
  { title: 'Admin', icon: ['gavel'] }
]

Note that I've made all icon properties into array, even if they only have one icon. This is to make everything consistent and easy to work with.

Then in your template, you can iterate the icons in another v-for

<v-list-tile-action>
  <v-icon v-for="icon in item.icon" :key="icon">{{ icon }}</v-icon>
</v-list-tile-action>

answered Jun 14, 2019 at 5:27

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

Loop using v-for in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related