Vue modal w oddzielnym komponencie

Hej, poniższym kodem wyświetlam w bootstrapowej tabelce dane a na kliknięcie w wiersz otwieram okno modalne z jakimiś danymi.
Chciałbym teraz przenieść kod modala do osobnego komponentu

<template>
  <div>
    <div class="row">
      <div class="col-md-12">      
          <template v-slot:preview>
            <div>
              <b-table
                responsive
                striped
                hover          
                :items="transactionHistory.items"
                :fields="transactionHistory.fields"                         
                @row-clicked="rowClickHandler"            
              >          
              </b-table>
            </div>
          </template>
      </div>
    </div>    
<template>
    
      <!-- details modal  -->
      <b-modal size="lg" scrollable ref="transactionHistoryDetailModal" :title=modalItems.items.documentFullNo>
        <div class="d-block text-center">
          
        </div>
                <b-table
                  responsive
                  striped   
                  bordered             
                  hover       
                  :fields="modalItems.fields"    
                  :items="modalItems.items.positions"                                    
                >            
                </b-table>

      </b-modal>
      <!-- end of details modal -->
    </template>
  </div>
</template>

wycinek kodu js

  methods: {
    rowClickHandler(record) {
      this.$refs.transactionHistoryDetailModal.show();
      this.modalItems.items = record;
    }
  },
    ApiService.get("/transaction-history/")
      .then(response => {
        this.transactionHistory.items = response.data;
    });
  }
};
</script>
```

modal w osobnym komponencie
```html
<template>
    <!-- details modal  -->
      <b-modal size="lg" scrollable ref="transactionHistoryDetailModal" title="modal child">
        <div class="d-block text-center">
          
        </div>
        <b-table
            responsive
            striped   
            bordered             
            hover       
            :items="details.items.positions"                                    
        >            
        </b-table>

      </b-modal>
      <!-- end of details modal -->
</template>

<script>
export default {
    name: "DocumentDetailsModal",
    props: {
            details: []
        },
    data() {
        return {
            
        }
    }
}
</script>
```
i teraz w komponencie głównym 
```html
<DetailsModal :details=this.modalItems.items>
</DetailsModal>
```
dane ładnie w narzędziach developerskich widzę jednak nie wiem jak podnieść modal?

Modala exportujesz jako DocumentDetailsModal a w glownym komponencie wyswietlasz jako DetailsModal ???. Komponent w vue wywolujesz w troche inny sposob niz zwykly htmlowy tag - <DocumentDetailsModal. :details="this.modalItems.items"/>

ok jeszcze raz... modal komponent

<template>
    <!-- details modal  -->
      <b-modal size="lg" scrollable ref="transactionHistoryDetailModal" title="modal child">
        <div class="d-block text-center">
          
        </div>
        <b-table
            responsive
            striped   
            bordered             
            hover       
            :items="details.items.positions"                                    
        >            
        </b-table>

      </b-modal>
      <!-- end of details modal -->
</template>

<script>
export default {
    name: "DocumentDetailsModal",
    props: {
            details: {}
        },
    data() {
        return {
            
        }
    }
}
</script>

komponent nadrzędny

<template>
  <div>
    <div class="row">
      <div class="col-md-12">
          <template v-slot:preview>
            <div>
              <b-table
                responsive
                striped
                hover          
                :items="transactionHistory.items"
                :fields="transactionHistory.fields"            
                :tbody-tr-class="rowClass"                
                @row-clicked="rowClickHandler"            
              >          
              </b-table>
            </div>
          </template>
      </div>
    </div>
    
    <DocumentDetailsModal :details="modalItems" />
    
  </div>
</template>

<script>
import { SET_BREADCRUMB } from "@/core/services/store/breadcrumbs.module";
import ApiService from '@/core/services/api.service';
import DocumentDetailsModal from '@/view/pages/customer/transaction-history/DocumentDetailsModal.vue'

export default {
  data() {
    return {
      transactionHistory: {      
        items: [],
      },
      modalItems: {
        items: []
      },
    };
  },
  components: {
    DocumentDetailsModal
  },
  methods: {
    rowClickHandler(record) {
      this.modalItems.items = record;    
      // tutaj show modal nicht
    }
  },
};
</script>

gdy kliknę w wiersz modalItems.items mam wypełnione danymi, zapewne mój modal, gdyby się pokazał, miałby te dane w tabelce.
ale go nie mam na ekranie :(

Nie trigerujesz tego modala, więc się nie wyświetla.
https://bootstrap-vue.org/docs/components/modal -> <b-button v-b-modal.modal-1>Launch demo modal</b-button> -> v-b-modal."id modala"

tak nie odpalam go. ale jak to zrobić. To co podrzuciłeś to inne wywołanie z przycisku

Musisz id itemu przekazać w propsach

Komponent docelowy

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div class="col-lg-12">
      <div v-for="item in items" v-bind:key="item.id">
        {{item}}
        <button @click="openModal(item)">Open Modal</button>
      
          <Modal :id="item.id" :name="item.name" :surname="item.surname" />

      </div>

    </div>
  </div>
</template>

<script>
import Modal from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    Modal,
  },
  methods: {
    openModal(modal) {
      this.item = modal;
      this.$bvModal.show(this.item.id);
    }
  },
  data() {
    return {
      items: [
        {
          id: 1,
          name: "Hello",
          surname: "Test",
        },
        {
          id: 2,
          name: "Hello",
          surname: "Fred",
        },
      ],
    };
  },

Komponent modal

<template>
    <b-modal :id="id" title="BootstrapVue">
    <p class="my-4">{{name}}</p>
    <p class="my-4">{{surname}}</p>

  </b-modal>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    name: String,
    surname: String,
    id: Number,
  }
};
</script>

@Descendant: tak to jest to dzieki
potrzebuję jeszcze odświeżyć <b-table> jak zamknę tego modala

        <button @click="openModal(item)">Open Modal</button>

dodaj @ok="funkcja" i ta funkcja ktora fetchuje dane

Podejrzewam, ze to będzie to

 ApiService.get("/transaction-history/")
      .then(response => {
        this.transactionHistory.items = response.data;
    });
  }

tylko obierz to w funkcję.

teraz mam inną sytuację ale nadal podobna, robie dodanie rekordu z modala. Dzięki @Descendant
działający przykład dla potomnych

<AddDocModal :id="id" :title="'Nowy'" @handleRefresh="onSave"></AddDocModal>

...

    methods: {
        onSave(docs) {
            this.docs.items = docs;
        },
```
sam modal, coś takiego masz na myśli?
```javascript
export default {
    name: "AddDocModal",
    props: {
        id: String,
        title: String
    },
    data() {
        return {
            reason: null,
            description: '',            
        }
    },
    methods: {
        handleOk() {
            
            ApiService.post("/doc/add", {description: this.description, reason: this.reason}).then(() => {
                this.fetchDocs()
            });
            
        },
        resetModal() {
            this.reason = null;
            this.description = ''
        },
        fetchDocs() {
            ApiService.get("/docs").then(response => {
                const docs = response.data;
                this.$emit('handleRefresh', docs);
            });
        }
    }
}
</script>
```