在 vuejs 中使用 v-for 循环？

Question

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

我做了一个代码笔：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: [&nbsp; { title: 'Dashboard', icon: ['dashboard','search'] },&nbsp; { title: 'Account', icon: ['account_box'] },&nbsp; { title: 'Admin', icon: ['gavel'] }]请注意，我已将所有icon属性都放入数组中，即使它们只有一个图标。这是为了使所有内容一致且易于使用。然后在您的模板中，您可以在另一个中迭代图标 v-for<v-list-tile-action>&nbsp; <v-icon v-for="icon in item.icon" :key="icon">{{ icon }}</v-icon></v-list-tile-action>