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" }] ); |