Appending An Icon To A Table Column In Vuetify Data Table?
I have a Vuetify data table and I am trying to append an icon to just the with protein in it but the way it is being rendered, I am not able to understand how would I go
Solution 1:
If I understood your question correctly, you want dynamic icons for (or appended onto) the protein
fields, so here's one way to achieve that:
Vue.component('MyComponent', {
template: `
<tr>
<td><i :class="['fa', 'fa-'.concat(protein)]"></i></td>
<td>{{carbs}}</td>
<td>{{fats}}</td>
<td>{{iron}}</td>
</tr>
`,
props: ['protein', 'carbs', 'fats', 'iron']
});
newVue({
el: '#demo',
data: () => ({
opts: {
headers: [
{ text: 'Protein', value: 'protein' },
{ text: 'Carbs', value: 'carbs' },
{ text: 'Fats', value: 'fats' },
{ text: 'Iron', value: 'iron' }
],
items: [
{ protein: 'cutlery', carbs: 4, fats: 1, iron: 5 },
{ protein: 'shopping-basket', carbs: 5, fats: 5, iron: 0 },
{ protein: 'beer', carbs: 2, fats: 9, iron: 3 }
],
hideActions: true
}
})
})
<linkhref="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet" /><linkhref="https://fonts.googleapis.com/css?family=Roboto:400,500,700|Material+Icons"rel="stylesheet"><linkhref="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script><divid="demo"><v-data-tablev-bind="opts"><template #items="{ item }"><my-componentv-bind="item"></my-component></template></v-data-table></div>
Solution 2:
Hope this helps someone.
<template><v-data-table><templatev-slot:item.protein="{ item }"><iclass="fa fa-globe"></i>{{ item.protein }}
</template></v-data-table></template>
Post a Comment for "Appending An Icon To A Table Column In Vuetify Data Table?"