小编Cat*_* Ha的帖子

我使用 laravel、vue 和 bootstrap-vue。

我创建了一个 vue 组件，用于显示元素表（本例中为子网）。

对于它们中的每一个，我都展示了一个组件（modal_edit-subnet），它应该打开一个模式，允许编辑相关行元素的数据。

问题是它显示了所有表格元素的模态。例如，如果表格有 3 行，则显示 3 个模式（关闭一个后显示下一个）。每个模态都有每一行的数据。我试图添加“密钥”但没有成功。

我究竟做错了什么？

谢谢！

显示表格的组件

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