带有插槽的 Vue 表 2。如何将数据 id 传递给事件处理程序？

Question

我正在使用插槽在 Vue 表 2 中显示一个按钮。如何将仓库的 id 即 123 或 456 传递给 edit() 事件处理程序？

我试过添加道具（因为这是文档显示的内容）。但我没有任何运气。我在组件中使用 Vue Tables 2。

<template>
<div>
    <h1>How to pass warehouse id to edit() method?</h1>
    <v-client-table :columns="columns" :data="warehouses" :options="options">
        <span slot="actions" slot-scope="{ WarehousesMin }"> 
            <button v-on:click="edit">Edit</button>
        </span>
    </v-client-table>
</div>

export default { 
name: 'WarehousesMin',
 data() {
        return {
            warehouses: [
                {"id": 123, "name": "El Dorado", "loc": "EDO"},
                {"id": 456, "name": "Tartarus", "loc": "TAR"}
            ],
            options: {
                headings: {name: 'Name', code: 'Loc', actions: 'Actions'}
            },
            columns: ['name', 'loc', 'actions'],
        }
    },
methods: {
    edit (warehouseId) {
        // How to get id of warehouse here?  i.e. 123 or 456
    }   
   }
}

Answer 1

我以前没有使用过这个库，但据我所知 Vue 插槽，你可以把你的代码改成这样，然后再试一次：

<template>
<div>
    <h1>How to pass warehouse id to edit() method?</h1>
    <v-client-table :columns="columns" :data="warehouses" :options="options">
        <span slot="actions" slot-scope="{row}"> 
            <button v-on:click="edit(row.id)">Edit</button>
        </span>
    </v-client-table>
</div>

在脚本部分，更改为：

export default { 
name: 'WarehousesMin',
 data() {
        return {
            warehouses: [
                {"id": 123, "name": "El Dorado", "loc": "EDO"},
                {"id": 456, "name": "Tartarus", "loc": "TAR"}
            ],
            options: {
                headings: {name: 'Name', code: 'Loc', actions: 'Actions'}
            },
            columns: ['id', 'name', 'loc', 'actions'],
        }
    },
methods: {
    edit (warehouseId) {
        // The id can be fetched from the slot-scope row object when id is in columns
    }   
   }
}

我认为这应该有效，但如果没有，请告诉我。