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

Posted 2023-02-22

【中文标题】将 Firebase Props onclick 传递给 Vue 中的方法

【英文标题】：Pass Firebase Props onclick to methods in 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 ：>

【参考方案1】：

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

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

methods: 
  onDelete(itemId) 
    // ...