Get value of b-table cell in modal window-CodePudding

Looking for assistance on how to pull in the value from a bootstrap vue table within a modal window. Currently, it generates the modal, however the contents for the variable {{ interface_records.interface }} is blank. I've also attempted with {{ item.interface }} which also comes up blank.

interface_records has 2 keys - interface and mode.

Thank you for your time

<div v-if="selected.length > 0" v-for="item in selected">
    <b-table 
        id="my-table-interfaces"
        responsive
        sticky-header="550px"
        outlined
        :items="interface_records" 
        :fields="fields_interface"
        :key="interface_records.interface"
    >
        <template #cell(actions)>
            <b-button v-b-modal.modal-confirm @click="showModal = true">        
                <b-icon icon="menu-down" aria-hidden="true"></b-icon> Actions
            </b-button>
        </template>
    </b-table>
    <b-modal id="modal-confirm" ref="modal-confirm" title="Actions" hide-footer centered>
        {{ interface_records.interface }} - Actions
    </b-modal>
</div>

CodePudding user response：

Seems the problem here is the key prop you have provided to the b-table. Try following I just changed the key of the b-table.

<div v-if="selected.length > 0" v-for="(item, itemIndex) in selected">
<b-table 
    id="my-table-interfaces"
    responsive
    sticky-header="550px"
    outlined
    :items="interface_records" 
    :fields="fields_interface"
    :key="itemIndex"
>
    <template #cell(actions)>
        <b-button v-b-modal.modal-confirm @click="showModal = true">        
            <b-icon icon="menu-down" aria-hidden="true"></b-icon> Actions
        </b-button>
    </template>
</b-table>
<b-modal id="modal-confirm" ref="modal-confirm" title="Actions" hide-footer centered>
    {{ interface_records.interface }} - Actions
</b-modal>