Umieszczenie w tablicy Bootstrap Vue (generowanej responsywnie) przycisku ze zdefiniowaną podpowiedzią (popover) zaczytującą z bazy danych jest trochę zawiłe.

Najpierw robimy tablicę ze slotem na przycisk:

1
2
Kursanci
<div>{{text}}</div>

Następnie w funkcji rowClickHandler semafor przełącza akcję pomiędzy kliknięciem w wiersz, a w przycisk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
rowClickHandler: function(record, index)
{//zdarzenie kliknięcia
// alert('wiersz: ' + JSON.stringify(record) + '\nindex:' + index);
//alert( JSON.stringify(this.items));

if (this.semafor) //jeśli kliknięto nie selecta
{
//tu obsługa kliknięcia w wiersz, ale poza guzikiem
}
else //kliknięto w przycisk
{
if (this.uczestnicyKursu[this.rowIndex][0]["text"]=="Brak") //tylko gdy jeszcze nie wczytano musi pobrać
axios
.get('https://adr/prog.php?nr_kursu=' + encodeURIComponent(record.nr_kursu)) //uwaga na znaki specjalne +
.then(response =>
{
this.uczestnicyKursu[this.rowIndex].splice( 0, 1, response.data==null ? { "value": "", "text": "Brak" } : response.data[0]);//dlaczego [0]?
//UWAGA! Splice dodaje [] dookoła tablicy, dlatego trzeba [0] i potem dodać pozostałe
for (var i=1; i<response.data.length; i++) //pozostałe wpisy z pobieranej tablicy [1-(n-1)]
this.uczestnicyKursu[this.rowIndex].push(response.data[i]);
// alert(JSON.stringify(this.uczestnicyKursu));
return this.uczestnicyKursu;
});

this.semafor = true; //domyślnie klikamy w rząd nie w przycisk.

}
},

//TERAZ FUNKCJA KLIKNIĘCIA W PRZYCISK w wierszu:
pokazUczestnikow: function(event, rowIndex)
{
// this.$root.$emit('bv::hide::popover'); //chowa inne popovery
this.rowIndex = rowIndex;
// alert(rowIndex);
//alert(JSON.stringify(event));
this.semafor = false; //blokada showModal
},

//....
//W FUNKCJI created() trzeba zainicjować tablicę:
for (var i=0; i<100; i++)
this.uczestnicyKursu.push([{ "value": "a", "text": "Brak" }] );