将Firebase道具onclick传递给Vue中的方法

Question

您好，我想将自己的props.items传递给之后在Firebase中更改/删除其值的方法。我通过@onclick执行此操作，但是以某种方式vue无法识别方法中的props.item.id。可能我缺少了一些东西。

<v-data-table
      :headers="headers"
      :items="products"
      :sort-by="['description']"
      :search="search"
      :items-per-page="15"
      class="elevation-1">
 <template slot="items" slot-scope="props" >

   <td><v-chip small>{{props.item.id}}</v-chip></td>
   <td>{{props.item.name}}</td>
   <td>{{props.item.description}}</td>
   <td>{{props.item.price}}</td>
   <td>{{props.item.ingredients}}</td>
   <td>
     <v-chip small>{{props.item.type}}</v-chip>
   </td>
   <td><v-btn  @click="onDelete(props.item.id)" class="material-icons medium">delete</v-btn></td>
 </template>
    </v-data-table>

和脚本

            headers: [
                {text: 'ID', value: 'id'},
                {
                    text: 'Name',
                    align: 'left',
                    sortable: true,
                    value: 'name',
                },
                {text: 'Beschreibung', value: 'description'},
                {text: 'Preis', value: 'price'},
                {text: 'Inhalt', value: 'ingredients'},
                {text: 'Kategorie', value: 'type'},
            ],
            products: [
                {
                    id: this.id,
                    name: this.name,
                    description: this.description,
                    price: this.price,
                    ingredients: this.ingredients,
                    type: this.type,
                },
            ],

        }
    },
    methods: {
       onDelete(props.item.id) {

        }
    }
}

Answer 1

onDelete的方法声明无效，因为参数标识符不能为props.item.id（即，名称中不允许使用点）。 identifier的有效字符是Unicode字母，$，_或数字（0-9）。

鉴于参数的目的，我将其重命名为itemId：

methods: {
  onDelete(itemId) {
    // ...
  }
}