Currently, I am facing an issue with using v-for to iterate through data containing titles and icons. While looping through the data, I can only obtain one icon at a time. My query is regarding how I can retrieve more than one icon during the loop.
You can view the codepen related to this topic here: https://codepen.io/anon/pen/MMaGOZ?&editable=true&editors=101. In this specific example, I wish to include multiple icons such as a search icon in addition to the dashboard icon.
<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' }
]
}
}
})
When attempting to use icon: ['dashboard', 'search'], it displays an error message. Could you provide guidance on resolving this issue?
Thank you for your help.