如何将数据表值调用到console.log Vue.js（vuetify）

Question

嗨，Vue.js中的新手。 我只想使用console.log从数据表中调用名称。 我只是从vuetify网站复制了代码，然后尝试进行操作。 我想从示例表中将甜点名称称为缺点。 这是代码

<template>
  <div class="about">
    <h1>Manage Companies</h1>

      <v-container>
        <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
        search=""
      >

        <template v-slot:items="props">
          <tr @click="cmdpush">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
          </tr>
        </template>

      </v-data-table>



      </v-container>
  </div>
</template>



<script>
  export default {

    data () {
      return {

        headers: [
          {
            text: 'Company Name',
            align: 'left',
            sortable: true,
            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' }
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 15,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          }
        ]

      }

    },

      methods:{
        cmdpush(){
          console.log()
        }
      }
  }
</script>

有人可以在vue中提供Crud教程的链接吗

Answer 1

<template>
  <div class="about">
    <h1>Manage Companies</h1>

      <v-container>
        <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
        search=""
      >

        <template v-slot:items="props">
          <tr @click="cmdpush(props.item)">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
          </tr>
        </template>

      </v-data-table>



      </v-container>
  </div>
</template>



<script>
  export default {

    data () {
      return {

        headers: [
          {
            text: 'Company Name',
            align: 'left',
            sortable: true,
            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' }
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 15,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          }
        ]

      }

    },

      methods:{
        cmdpush(value){
          console.log(value)
          console.log(value.calories)  


        }
      }
  }
</script>