 Bindowanie jQuery dla elementów Vue.js |
  |
| Bindowanie jQuery dla elementów Vue.js |
Post
#1
|
|
 Grupa: Zarejestrowani Postów: 8 068 Pomógł: 1414 Dołączył: 26.10.2005 Ostrzeżenie: (0%) 
 |
W Vue.js renderuję sobie tabelę.
W niej mam buttony. Chciałbym teraz pod te buttony podpiąć plugin tooltop z Bootstrapa. Nie bardzo wiem jak się dobrać do html po wygenerowaniu przez Vue. Mam zdefiniowany event: Kod events: { tooltips: function() { $('[data-toggle="tooltip"]').tooltip(); } }, i w metodzie pobierającej dane robię tak: Kod loadFiles: function() { this.$http.get('/api/files/' + this.lastIndex, function (data, status, request) { this.$set('files', data) this.$emit('tooltips'); }).error(function (data, status, request) { // handle error }) }, Jednak takie wywołanie nie zawsze da efekt bo może tak być że jquery odpali się szybciej niż wyrenderuje widok. Ten post edytował Pyton_000 12.12.2015, 11:40:55 |
 |
 
|
|
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Co prawda Vue.js nie znam, ale osobiśćie bym kombinował z jakimiś zdarzeniami odpalanymi po "skompilowaniu" widoku → http://vuejs.org/api/#attached
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 8 068 Pomógł: 1414 Dołączył: 26.10.2005 Ostrzeżenie: (0%)
|
Niestety nie działa.
Problem polega na tym że pobieram sobie listę plików i listę katalogów oddzielnie requestami i one są renderowane już w sumie po fakcie. |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Hm… http://vuejs.org/api/#vm-nextTick ? Jakieś takie skąpe to API się wydaje…
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 8 068 Pomógł: 1414 Dołączył: 26.10.2005 Ostrzeżenie: (0%)
|
Super
 Dla potomnych (chociaż nie wiem czy ktoś się interesuje Vue jak i Laravelem )Kod bindTooltip: function() { $('table button[data-toggle="tooltip"]').tooltip() }, loadDirectories: function() { this.$http.get('/api/dir/' + this.lastIndex, function (data, status, request) { this.$set('directories', data) if(this.lastIndex != 1) { this.directories.unshift({ name: '..', size: 0 }); } this.$nextTick(this.bindTooltip) }).error(function (data, status, request) { // handle error }) this.loadFiles(); }, Dodałem metodę bindTooltip() i w requeście dodałem Kod this.$nextTick(this.bindTooltip) Zadziałało tak jak powinno |
|
|
|
|
|
Aktualny czas: 22.08.2025 - 11:36 |
