显示每个 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

问题是：

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>

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