We often have such a demand, after a component has been rendered to the data request, the request related to this value.
First thought is executed mounted inside
After testing found: page has rendered, not rendered sub-assemblies, mounted it can not meet the requirements.
Later, God help large degree + mother, finally we found a reliable solution! ! !
vuex + watch (vueX global state management, watch variables are listening to the vue)
Step is, the definition of a variable to hold the assembly in vuex rendering state, the default component is not rendered.
State: { isFinish: to false, // component rendering state }, mutations: { SET_IS_FINISH (State, isFinish) {// modify the state of the global assembly method state.isFinish = isFinish; }, }, // since the component binding value, when the value exists, the component had been rendered complete. Therefore, in a method of assembly, this value will be set to true; beforeDestroy: function () { . Store.commit the this $ ( 'SET_IS_FINISH', to false); }
If this component in multiple use, be sure to log off when the page, change the state back, so watch monitor will be effective.
Components used on a page, the status monitor, when the value is true, the rendering is completed assembly. At this time, making the page request, the accuracy!
computed: { myfinish () { return the this $ store.state.isFinish;. }, }, Watch: { myfinish (newVal, oldVal) { // Here, the rendering component has completed, the operation may be performed for dom, may be request data is completed after the component rendering. } }
This perfect realization of the effect we want, since it is necessary to wait for the results of the component rendering, use it to request data.
VUEX + watch is a very good solution! ! !