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

Question

我使用 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>

Answer 1

问题是：

1. 您正在为表格的每一行渲染一个模式；
2. 阅读文档，似乎模态是由 id 触发的，并且您的 b-modal id 不是动态的，具体取决于行。

如何修复它：

1. b-table在关卡中仅使用一种模态
2. 动态地将 id 注入到您的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>

3. 使用 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>