Button that shows modal for each b-table row

Question

Im using laravel, vue, and bootstrap-vue.

I have created a vue component that displays a table of elements (subnets in this example).

For each of them I show a component (modal_edit-subnet) thats should open a modal that allows to edit the data of the element of the related row.

The problem is that it shows modals for all of the table elements. For example, if the table has 3 rows, it shows 3 modals (after closing one it shows the next). Each of the modals with the data of each of the rows. I've tried to add "key"s but no success.

What am i doing wrong?

Thanks!

Component that shows the table

<template>
    <div>
        <b-card class="text-center">            
            <b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
                <template slot="[ip_address]" slot-scope="data_subnets">
                    <b>{{ long2ip(data_subnets.item.ip_address) }}</b>
                </template>
                <template slot="[actions]" slot-scope="data_subnets">
v-on:deleteSubnet="deleteSubnet"></modal_delete-subnet>
                    <modal_edit-subnet :key="'modal_edit_subnet' + data_subnets.item.id" :subnet="data_subnets.item" v-on:editSubnet="editSubnet"></modal_edit-subnet>
                </template>
            </b-table>
        </b-card>
    </div>
</template>

Modal modal_edit-subnet

<template>
  <div>
    <b-button size="sm" v-b-modal.modal-edit-subnet>Edit</b-button>

    <b-modal
      id="modal-edit-subnet"
      ref="modal"
      title="Edit subnet"      
      @ok="handleOk"
    >    
    This is subnet {{data_subnet.id}} 
    </b-modal>
  </div>
</template>

Answer 1

The problem is that:

1. You're rendering a modal for each row of the table and;
2. Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.

How to fix it:

1. Use just one modal on the b-table level
2. Dynamically inject id into your modal_edit-subnet component:

<template>
  <div>
    <b-button size="sm" v-b-modal[id]>Edit</b-button>

    <b-modal
      :id="id"
      ref="modal"
      title="Edit subnet"      
      @ok="handleOk"
    >    
    This is subnet {{data_subnet.id}} 
    </b-modal>
  </div>
</template>

<script>
export default {
    props: {
        id: {
            type: String | Number
        }
    }
}
</script>

3. Use v-model (this is the way I would do it)

<template>
  <div>
    <b-button size="sm" @click="show = true">Edit</b-button>

    <b-modal
      v-model="show"
      ref="modal"
      title="Edit subnet"      
      @ok="handleOk"
    >    
    This is subnet {{data_subnet.id}} 
    </b-modal>
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: false
        }
    }
}
</script>