Vuejs2 Vuetify数据表问题

我正在尝试创建一个数据表，在大多数情况下，它似乎是有效的，但我正在考虑添加一个额外的列，其中只有图标。我使用v-for循环并获取图标，但它们似乎不起作用

我创建了一个代码笔：

{{props.item.name}
{{props.item.carries}
{{props.item.fat}
{{props.item.carbs}
{{props.item.protein}
{{props.item.iron}
{{props.icon}
新Vue({
el:“#应用程序”，
数据（）{
返回{
选定：[]，
标题：[
{
文字：“甜点（100克），
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：'卡路里'，值：'卡路里'}，
{text:'Fat（g'），value:'Fat'}，
{text:'Carbs（g）'，value:'Carbs'}，
{text:'Protein（g'），value:'Protein'}，
{文本：'Iron（%）'，值：'Iron'}，
{文本：'Icons'，值：'icon'}
],
甜点：[
{
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：1%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3，
铁：1%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“Eclair”，
卡路里：262，
脂肪：16.0，
碳水化合物：23，
蛋白质：6.0，
铁：7%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名字：“纸杯蛋糕”，
卡路里：305，
脂肪：3.7，
碳水化合物：67，
蛋白质：4.3，
铁：8%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“姜饼”，
卡路里：356，
脂肪：16.0，
碳水化合物：49，
蛋白质：3.9，
铁：16%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“果冻豆”，
卡路里：375，
脂肪：0.0，
碳水化合物：94，
蛋白质：0.0，
铁：0%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“棒棒糖”，
卡路里：392，
脂肪：0.2，
碳水化合物：98，
蛋白质：0，
铁：“2%”，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“蜂巢”，
卡路里：408，
fat:3.2，
碳水化合物：87，
蛋白质：6.5，
铁：45%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“甜甜圈”，
卡路里：452，
脂肪：25.0，
碳水化合物：51，
蛋白质：4.9，
铁：22%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
},
{
名称：“KitKat”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
蛋白质：7，
铁：6%，
图标：[
“搜索”，
“仪表板”，
“时间线”，
“竖起大拇指”
]
}
]
}
}
})

您试图在错误的位置重复错误的数据

签出此源

---

问你是否有什么不清楚的地方。

lol我刚才在你发帖前也这么想过。哈哈。谢谢：没有问题，如果你自己发现的话会更好；）

  <div id="app">
  <v-app id="inspire">
   <v-data-table
    v-model="selected"
  :headers="headers"
  :items="desserts"
  item-key="name"
  select-all
  class="elevation-1"
   >
    <template v-slot:items="props">
    <td>
      <v-checkbox
        v-model="props.selected"
        primary
        hide-details
      ></v-checkbox>
       </td>
      <td>{{ props.item.name }}</td>
       <td>{{ props.item.calories }}</td>
       <td>{{ props.item.fat }}</td>
      <td>{{ props.item.carbs }}</td>
       <td>{{ props.item.protein }}</td>
      <td>{{ props.item.iron }}</td>
      <td v-for="icon in desserts.icons" :key="icon">{{props.icon}}</td>
     </template>
   </v-data-table>
 </v-app>
 </div>

     new Vue({
     el: '#app',
      data () {
     return {
       selected: [],
       headers: [
          {
           text: 'Dessert (100g serving)',
      align: 'left',
      sortable: false,
      value: 'name'
       },
     { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
    { text: 'Icons', value: 'icon'}
      ],
     desserts: [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: '16%',
     icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: '0%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: '2%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: '45%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
      iron: '22%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
    },
    {
        name: 'KitKat',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: '6%',
      icons: [
        'search',
        'dashboard',
        'timeline',
        'thumb_up'
      ]
       }
     ]
   }
   }
  })