在 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: [

  { 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>