javascript - 在vuejs中使用v-for循环？

Question

我正在尝试使用v-for来循环包含标题和图标的数据。现在我只能通过循环获得一个图标，我的问题是如何在循环时获得多个图标？

我做了一个codepen:https://codepen.io/anon/pen/MMaGOZ?&editable=true&editors=101 。所以基本上在这个例子中我怎样才能获得多个图标。因此，如果我还想要仪表板旁边有一个搜索图标。

  <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' }
    ]
   }
 }
 })

如果我这样做icon: 'dashboard', 'search' => 这会给我一条错误消息。不知道如何才能得到这个？

提前致谢。

Answer 1

正如评论中提到的，{ icon: 'dashboard', 'search' } 无效，您需要使用数组(或类似的列表/集合)，例如

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

请注意，我已将所有 icon 属性放入数组中，即使它们只有一个图标。这是为了使一切保持一致且易于使用。

然后在您的模板中，您可以迭代另一个 v-for 中的图标

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