After successfully exporting a value from a JS file and incorporating it into my Vue template, I have encountered an issue with using the same value outside of the template context.
To simplify, here is a glimpse of my current setup and what I am aiming to achieve:
Inside my myJS.js file (typically used for API calls in my application):
const appService = {
getPosts() {
return 123456;
}
}
export default appService
Furthermore, within my VUE component, the structure is as follows:
<template>
{{ info }}
</template>
alert(info);
import appService from '../myJS'
export default {
name: 'myvue',
props: {
msg: String
},
data () {
return {
info: {}
}
}
async created () {
this.info = await appService.getPosts();
}
}
Currently, the value displays correctly in the template. However, triggering the alert(info) statement results in an 'info is undefined' error.
Is there a way to utilize this value in regular JavaScript code outside of the template?
I trust that my explanation makes sense.
Thank you in advance!