Question

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

我尝试添加道具（因为这是文档显示的内容）。但是我没有运气。我正在组件中使用Vue表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
    }   
   }
}

我认为这应该有效，但是如果没有请让我知道。

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

1 个答案: