How to perform a function after the render?

How to perform a function after the render?
There's a list, which(it turned out) to be formed on the side of the buck and all was well until there was a need to filter the list. The list appears in the dependent variables via v-if in the parent container.

And like anything, but when you change the variables to true, the list appears but is not filtered. What can be the reason?
The filter function works via JQuery

Filter:
filterSelectChildren function(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();
}
}
}


Very large code 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 = 'the Data for this type of form no. Select another form type';
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 () {

}
}
});

April 4th 20 at 12:57
1 answer
April 4th 20 at 12:59
Solution
Perhaps the reason that the Vue updates the DOM asynchronously.
To the point where now called filterSelectChildren() the DOM has not yet updated tables no.

Try to filter by the following tick:
Vue.nextTick(function () {
 filterSelectChildren('#codepenSelectFirstChild', currentSetting);
})
Thank you, it worked - Cierra_Rempel35 commented on April 4th 20 at 13:02

Find more questions by tags Vue.js