please read the following (wrong) code. How can I fix it?
My problem is that I'm trying to share several variables, which should be reactive, between different composables and the main app.
All those variables need DOM to be assigned, thus, they need onmounted hook. So useDropzones and usePanels both assign variables onmounted as well as the main app. And all those variables are cross-used between the cited entities. But in fact, they will be all undefined, quite obviously. How to fix?
const vueapp = Vue.createApp({
setup(props, {attrs, slots, emit}){
let validators = reactive([]);
let panels = reactive([]);
let code = null;
useDropzones(code); // assigned by main app's onMounted
usePanels(panels, validators); // it will populate panels, onmounted, used by main app below, onmounted
onMounted(() => {
nextTick(() => {
code = form_elem.find('input[name="form-code"]').val(); // here I'm setting code variable, used by useDropzones()
_.each(panels, function(panel, index){ // TODO: native?
// execute code that populates validators, used by usePanels()
}.bind(this));
}); // nexttick
}); // onmounted
return {}
},
});
Move the useDropzones(code) call into onMounted() when you've set code to the element reference:
Vue.createApp({
setup() {
// ⛔️ moved into onMounted
// let code = null;
// useDropzones(code);
onMounted(() => {
nextTick(() => {
const code = form_elem.find('input[name="form-code"]').val();
useDropzones(code);
})
})
}
})