Tengo un archivo reutilizable llamado: 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 } }En mi archivo de plantilla llamado: Filter.vue, llamo al archivo useLanguage nuevamente y uso varias funciones:
<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> El problema que estoy experimentando es que dentro de esta plantilla intento crear un campo de entrada. Pero data son nulos todavía. Creo que tiene que ver con el hecho de que los datos no están disponibles mientras se crea la plantilla porque la función no está lista ( availableLanguages() )
¿Cómo resolver esto?
Realmente no tengo suficiente código para salir de aquí, pero una solución ingenua a su problema sería tener un indicador de dataLoaded de datos en su componente que se cambia a true una vez que finaliza la función. A continuación, puede utilizar este indicador dataLoaded en un v-if para mostrar un indicador de carga y, una vez cargado, mostrará automáticamente los datos solicitados.
Algo como esto:
<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> De esta manera, Vue observará el valor reactivo dataLoaded de datos y esperará hasta que se vuelva verdadero. Una vez que lo haga, automáticamente reemplazará el div en la plantilla por el correcto, y todos los datos requeridos estarán allí.