Estoy mostrando a los usuarios una aplicación web que tiene enlaces a otro sitio web. Según el enlace en el que haga clic el usuario, lo llevará a otra página o permanecerá en la misma página.
Mi enfoque de implementación actual es tener una directiva "v-if" que verifique los resultados de una función asíncrona, pero el valor de la función siempre devuelve "Promesa pendiente" y no el valor real.
Estoy tratando de hacer algo como
<router-link v-else-if="checkValue(origin.link)" target="_blank" :to= "origin/link" > <span @click="checkValue(origin.link)"> {{ origin.value }} </span> </router-link>el problema aquí es que "checkValue" en v-if es una promesa, por lo que nunca obtiene el valor verdadero o falso en v-if.
No puedo almacenar los datos de esta llamada en una variable de datos porque hay millones y millones de registros y no puedo almacenarlos todos. "checkValue" es una función asíncrona como tal
async checkValue(link: string) { const val = await axios.get('service/${link}') if(val) { return true } else { return false }¿Hay alguna forma en la directiva v-if de que pueda verificar el retorno de esta función asíncrona? ¿O hay otro enfoque que pueda hacer para resolver esto? gracias
Si yo fuera usted, usaría la directiva v-if (o v-show) con una variable. No he probado el fragmento a continuación, pero algo como esto debería funcionar:
try{ let response = await axios.get('service/${link}') this.useThisVariableInVIF = true // or response.data.message; }catch(error) { this.useThisVariableInVIF = false; console.log(error); }; } Entonces simplemente v-else-if="useThisVariableInVIF"
Una promesa pendiente es un Proxy , que es, básicamente, un objeto. v-if comprueba la veracidad (lo que significa que se convierte en boolean ). En JavaScript, todos los objetos son verdaderos .
Esto significa que Boolean(someFunction()) (que es lo que evalúa v-if ) se evaluará como verdadero hasta que se cumpla la promesa. Después de que se asiente, evaluará la veracidad del resultado.
Así es como su problema se resuelve normalmente en Vue:
isLoading . Declararlo dentro del objeto devuelto por data , para que sea reactivo. data: () => ({ isLoading: true, orgin: {} }) Ahora use su método asíncrono y, en la respuesta, establezca isLoading en true mientras se carga y luego en false , cuando se resolvió la promesa. Tenga en cuenta que debe establecer this.isLoading = false en ambos casos de la Promesa (cumplir/rechazar) independientemente de cómo maneje los errores (si los maneja).
methods: { checkValue(link: string) { this.isLoading = true; this.origin = await axios.get('service/${link}'); this.isLoading = false; } }la etiqueta de su plantilla debe tener este aspecto:
<router-link v-else-if="origin.link && !isLoading" :to="origin.link"> <span v-text="origin.value" /> </router-link> Si usa la API de composición, la sintaxis es ligeramente diferente, pero la lógica es la misma. También tenga en cuenta que en Vue3, hay un componente dedicado para resolver este tipo de problema: <suspense> . Permite especificar una plantilla para cuando se carga y otra para cuando se carga.
no necesita almacenar los datos de esta llamada en una variable de datos, puede modificar su código de esta manera.
<router-link v-else-if="hasValue" target="_blank" :to= "origin/link" > <span @click="checkValue(origin.link)"> {{ origin.value }} </span> </router-link> <script> export default { data: function { return { hasValue: false } } created: function() { axios.get('service/${link}').then(c => { this.hasValue = !!c }) } } </script>