亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 vuejs 中使用 v-for 循環?

在 vuejs 中使用 v-for 循環?

函數式編程 2021-06-30 16:15:25
我試圖用來v-for循環包含標題和圖標的數據?,F在我只能通過循環獲得一個圖標,我的問題是循環時如何獲得多個圖標?我做了一個代碼筆: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' => 這會給我一條錯誤消息。不知道我怎么能得到這個?提前致謝。
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

如評論中所述,{ 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>


查看完整回答
反對 回復 2021-07-01
  • 1 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號