laravel - 显示每个 b 表行的模式的按钮

Question

我使用 laravel、vue 和 bootstrap-vue。

我创建了一个显示元素表(本例中为子网)的 vue 组件。

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

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

我究竟做错了什么？

谢谢!

显示表格的组件

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

Answer 1

问题是:

您正在为表格的每一行渲染一个模式，并且；

阅读文档，模态似乎是由 id 触发的，并且您的 b-modal id 不是动态的，具体取决于行。

如何修复它:

在 b-table 上仅使用一种模式级别

将 id 动态注入(inject)您的 modal_edit-subnet组件:

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

使用 v-model(我会这样做)

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