javascript - 将 Firebase Props onclick 传递给 Vue 中的方法

Question

我想将我props.items的方法传递给之后在 Firebase 中更改/删除它的值。我是这样做的@click，但 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>

和脚本摘录：

export default {
    methods: {
       onDelete(props.item.id) {
         // ...
       }
    }
}

Answer 1

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

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

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