I have a Vuetify data table and I am trying to append an icon to just the <td> with protein in it but the way it is being rendered, I am not able to understand how would I go about it?

So I have ponent which is being imported into the Vuetify data table template and that ponent separately consists of the icon div.

<template>
 <v-data-table>
   <template v-slot:items="props">
      <my-ponent 
        :protein="props.item.protein"
        :carbs="props.item.carbs" 
        :fats = "props.item.fats"
        :iron="props.item.iron"/>
   </template>
 <v-data-table>
</template>

And in my ponent i have the template setup like this:-

 <template>
    <tr>
      <td>
        <v-checkbox> </v-checkbox>
      <td>
           <div>        
            <router-link>
         <i class="fa fa-globe"></i>
        </router-link>
    </div>
    </tr>
 </template>

Not sure how I can append the icon to the protein field?

I have a Vuetify data table and I am trying to append an icon to just the <td> with protein in it but the way it is being rendered, I am not able to understand how would I go about it?

So I have ponent which is being imported into the Vuetify data table template and that ponent separately consists of the icon div.

<template>
 <v-data-table>
   <template v-slot:items="props">
      <my-ponent 
        :protein="props.item.protein"
        :carbs="props.item.carbs" 
        :fats = "props.item.fats"
        :iron="props.item.iron"/>
   </template>
 <v-data-table>
</template>

And in my ponent i have the template setup like this:-

 <template>
    <tr>
      <td>
        <v-checkbox> </v-checkbox>
      <td>
           <div>        
            <router-link>
         <i class="fa fa-globe"></i>
        </router-link>
    </div>
    </tr>
 </template>

Not sure how I can append the icon to the protein field?

• javascript
• html
• vue.js
• vuetify.js

Share Improve this question Follow edited Jan 4, 2020 at 7:07 Aria 3,84411 gold badge2626 silver badges5555 bronze badges asked Sep 10, 2019 at 18:14 SomethingwhateverSomethingwhatever 1,36866 gold badges3737 silver badges8181 bronze badges 2

• which version of Vuetify are you using? – Boussadjra Brahim Commented Sep 10, 2019 at 18:26
• 1 I am using the 1.5.18 – Somethingwhatever Commented Sep 10, 2019 at 18:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.ponent('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']
});

new Vue({
  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
    }
  })
})

<link href="http://netdna.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis./css?family=Roboto:400,500,700|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>

<div id="demo">
  <v-data-table v-bind="opts">
    <template #items="{ item }">
      <my-ponent v-bind="item"></my-ponent>
   </template>
  </v-data-table>
</div>

Hope this helps someone.

<template>
  <v-data-table>
    <template v-slot:item.protein="{ item }">
      <i class="fa fa-globe"></i>{{ item.protein }}
    </template>
  </v-data-table>
</template>