将 Firebase Props onclick 传递给 Vue 中的方法答案

【问题标题】：Pass Firebase Props onclick to methods in Vue将 Firebase Props onclick 传递给 Vue 中的方法
【发布时间】：2020-04-06 15:15:52
【问题描述】：

我想将我的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) {
         // ...
       }
    }
}

【问题讨论】：

onDelete(props.item.id) {} 不是有效的方法声明，因为参数名称不能是 props.item.id。
我认为您已经在 onclick 中以 props.item.id 传递，因此您的 onDelete 上的参数将仅为 id ：>

标签： javascript firebase vue.js vuetify.js vuefire

【解决方案1】：

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

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

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

【讨论】：