I have a reusable file called: useLanguage.js
import { defineComponent, ref, computed, onMounted, getCurrentInstance} from "vue";
import { useStore } from "vuex";
export default function useLanguage() {
const store = useStore();
const data = ref(null);
const profileLanguages = computed(() => {
return store.getters.allProfiles.data;
});
const currentDataSet = computed(() => {
return store.getters.currentProductSpecification.name
});
function availableLanguages() {
const obj = {}
const arr = [];
let i;
const object = profileLanguages.value;
const data = JSON.parse(currentDataSet.value)
for (i = 0; i < object.length; i++) {
arr.push(object[i].language)
obj[object[i].language] = '';
}
let y;
for (const key in data) {
arr.push(key)
obj[key] = data[key];
}
data.value = obj;
console.log(data.value) // Its filled as: {eng: 'english'}
}
function updateData(data) {
currentDataSet.value.name = JSON.stringify(data);
}
return {
data,
availableLanguages,
updateData
}
}
In my template file called: Filter.vue I call the file useLanguage again and use several functions:
<template>
<div class="modal fade" id="es_modal_edit_text" tabindex="-1" aria-modal="false">
<div v-for="(value, name) in data" :key="name" class="fv-row mb-7">
<label class="fs-6 fw-bold mb-2">{{ t("authorized.languageLabels." + name) }}</label>
<input type="text" class="form-control form-control-solid" placeholder="" v-model="data[name]" @input="updateData(data)">
</div>
</template>
<script>
import { defineComponent, ref, computed, onMounted, onBeforeMount } from "vue";
import useLanguage from '@/composables/useLanguage';
export default defineComponent({
props: ['currentId'],
setup() {
const { t } = useI18n();
const { availableLanguages, data, updateData } = useLanguage();
function update() {
this.currentProductSpecification.name = JSON.stringify(this.data);
}
availableLanguages()
return {
data,
t,
updateData
}
}
});
</script>
The problem I'm experiencing is that within this template I'm trying to create a input field. But data is null still. I think it has to do with the fact that data is not available while the template is being created because the function is not ready ( availableLanguages() )
How to solve this?
I don't really have enough code to go off of here, but a naive solution to your problem would be having a dataLoaded flag in your component that gets switched to true once the function finishes. You can then use this dataLoaded flag in a v-if to display a loading indicator, and once it's loaded it'll automatically display the requested data.
Something like this:
<template>
<div v-if="!dataLoaded">
<p>Loading Data...</p>
</div>
<div v-else>
<!-- Your old code goes here -->
</div>
</template>
<script setup>
import { ref } from "vue";
const dataLoaded = ref(false);
const data = ref({});
onMounted() {
// Return the value that data should be, then set the loaded flag to true
data.value = availableLanguages();
dataLoaded.value = true;
}
</script>
This way, Vue will watch the reactive dataLoaded value and wait until it turns true. Once it does, it'll automatically replace the div in the template to the proper one, and all the data required will be there.