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

【问题标题】：How to call data table value to console.log Vue.js (vuetify)如何将数据表值调用到console.log Vue.js（vuetify）
【发布时间】：2019-07-23 02:04:49
【问题描述】：

嗨，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教程的链接

【问题讨论】：

console.log(this. desserts)
控制台中未定义:(
对不起，我的意思是console.log(this.desserts) 没有空格

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：