Forum PHP.pl > Bindowanie jQuery dla elementów Vue.js

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Bindowanie jQuery dla elementów Vue.js

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Pyton_000

12.12.2015, 11:40:16

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.

Comandeer

12.12.2015, 22:34:39

Co prawda Vue.js nie znam, ale osobiśćie bym kombinował z jakimiś zdarzeniami odpalanymi po "skompilowaniu" widoku → http://vuejs.org/api/#attached

Pyton_000

14.12.2015, 08:56:54

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.

Comandeer

14.12.2015, 16:44:50

Hm… http://vuejs.org/api/#vm-nextTick ? Jakieś takie skąpe to API się wydaje…

Pyton_000

14.12.2015, 16:52:49

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.