Как выполнить функцию после рендера?

Question

[Дмитрий Баскаков]

Как выполнить функцию после рендера?
Есть список, который должен(так получилось) формироваться на стороне бэка и все было хорошо, пока не появилась необходимость отфильтровать список. Список появляется в зависимости от переменных, через v-if в родительском контейнере.

И вроде ничего такого, но при смене переменных в true, список появляется, но не фильтруется. С чем это может быть связано?
Функция фильтра работает через JQuery

Фильтр:

function filterSelectChildren(selector, filters) {
    let select = $(selector);
    let children = $(select).find('input');
    for (let i = 0; i < children.length; i++) {
        if (filters.indexOf(children[i]) !== -1) {
            let label = children[i].attr('id');
            $(children[i]).parent().hide();
            $(select).find('[for=]' + label).parent().hide();
        }else{
            let label = children[i].attr('id');
            $(children[i]).parent().show();
            $(select).find('[for=]' + label).parent().show();
        }
    }
}

Очень большой код Vue

new Vue({
    el: '#app',
    data: function () {
        return {
            currentSetting: {},
            firstChildSetting: {},
            secondChildSetting: {},
            firstChild: 'none',
            secondChild: 'none',
            formType: 'none',
            errorMessage: '',
            client: 'none',
            lastRequestResult: null,
        }
    },
    computed: {},
    watch: {
        currentSetting: function (val) {
            if (val.availableOptions !== undefined) {
                if (val.availableOptions.indexOf('children') === -1) {
                    if (this.secondChild !== 'none') {
                        this.secondChildSetting = {};
                        this.secondChild = 'none';
                    }
                }
                if (val.availableOptions.indexOf('child') === -1) {
                    if (this.firstChild !== 'none') {
                        this.firstChildSetting = {};
                        this.firstChild = 'none';
                    }
                }
            }
            let currentSetting = {};
            if (val.availableChild !== undefined && val.availableChild.length > 0) {
                let currentSetting = val.availableChild;
            }
            filterSelectChildren('#codepenSelectFirstChild', currentSetting);
        }
    },
    methods: {
        firstChildOnChange: function () {
            this.formSettingRequest(this.firstChild, 1);
        },
        secondChildOnChange: function () {
            this.formSettingRequest(this.secondChild, 2);
        },
        formTypeOnChange: function () {
            this.formSettingRequest(this.formType);
        },
        formSettingRequest: function (formType, childrenCount = 0) {
            $('.loader').addClass('loader-active');
            fetch('http://site.name/api/v1/getFormConfig?type=' + encodeURIComponent(formType))
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error("Network response was not ok");
                    }
                })
                .then(response => {
                    if (!response.status) {
                        if (this.firstChild !== 'none' || this.secondChild !== 'none') {
                            this.firstChildSetting = {};
                            this.secondChildSetting = {};
                            this.currentSetting = {};
                        }
                        this.errorMessage = 'Данных по этому типу формы нет. Выбирите другой тип формы';
                        return;
                    }
                    this.errorMessage = '';
                    if (childrenCount === 1) {
                        this.firstChildSetting = response.data;
                    } else if (childrenCount === 2) {
                        this.secondChildSetting = response.data;
                    } else {
                        this.currentSetting = response.data;
                    }

                })
                .then(function () {
                    $('.loader').removeClass('loader-active');
                })
                .catch(error => {
                    console.log(error);
                });
        },
        addAttributeValueByIndex: function (index, base) {
            base = base.charAt(0).toUpperCase() + base.slice(1);
            index = parseInt(index);
            switch (index) {
                case 0:
                    return 'firstChildField' + base;
                case 1:
                    return 'secondChildField' + base;
                case 2:
                    return 'currentFormField' + base;
                default:
                    return '';
            }
        },
        clientOnChange: function () {

        }
    }
});

Answer 1

[Сергей Соколов]

Возможно, причина в том, что Vue обновляет DOM асинхронно.
К моменту, где сейчас вызывается filterSelectChildren() DOM ещё не обновлён и таблицы нет.

Попробуйте фильтровать по следующему тику:

Vue.nextTick(function () {
    filterSelectChildren('#codepenSelectFirstChild', currentSetting);
})

Comments

[Дмитрий Баскаков]

Спасибо, сработало