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

Question

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

我尝试添加 Prop (因为这是文档显示的内容)。但我没有任何运气。我在组件中使用 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
    }   
   }
}

我认为这应该可行，但如果不行，请告诉我。