验证数据表问题

Question

我正在尝试创建一个数据表，并且大多数情况下似乎都在工作，但是我正在考虑添加一个仅带图标的附加列。我正在使用v-for循环并获取图标，但它们似乎不起作用。

我创建了一个代码笔：https://codepen.io/anon/pen/rELxLp?editors=1111

  <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'
      ]
       }
     ]
   }
   }
  })

Answer 1

您正在尝试遍历错误的数据以及错误的位置。

查看此来源Icons in td example

询问您是否不清楚。