javascript - Vue Tables 2 with Slots. How to pass data id to event handler? - Stack Overflow

admin管理员组

文章数量:1386581

I'm using a slot to display a button in Vue Tables 2. How can I pass the id of the warehouse i.e. 123 or 456 to the edit() event handler?

I've tried adding props (as this is what the docs show). But I haven't had any luck. I'm using Vue Tables 2 in a ponent.

<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
    }   
   }
}

I'm using a slot to display a button in Vue Tables 2. How can I pass the id of the warehouse i.e. 123 or 456 to the edit() event handler?

I've tried adding props (as this is what the docs show). But I haven't had any luck. I'm using Vue Tables 2 in a ponent.

<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
    }   
   }
}

• javascript
• vue.js
• vue-tables-2

Share Improve this question Follow asked Sep 4, 2018 at 19:51 Sparky1Sparky1 3,52566 gold badges2828 silver badges2929 bronze badges 3

• 1 check Vue-table-2 Guide: scoped-slots, it provides one similar sample as yours. – Sphinx Commented Sep 4, 2018 at 20:01
• 1 try this ` <button v-on:click="edit(props.row.id)">Edit</button>` – Boussadjra Brahim Commented Sep 4, 2018 at 20:38
• Thanks Sphinx, boussadjra. Setting slot-scope="props" and passing the id with <button v-on:click="edit(props.row.id)">Edit</button> works. – Sparky1 Commented Sep 5, 2018 at 16:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I haven't used this library before, but as far as I know about Vue slots, you can change your code into this and try again:

<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>

and in script part, change to:

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
    }   
   }
}

I think this ought to work, but if not please let me know.

本文标签： javascriptVue Tables 2 with Slots How to pass data id to event handlerStack Overflow