I'm able to call the variables and functions of alloy.js class file from index.js but I want to call a method from alloy.js of index.js. How to get it done? I tried to decalre require(index.js or index) but in vain and it pops me an error and crash the application.
index.js
todo_method{
}
alloy.js
//call todo_method(); of index.js
?
Here is how you can do it:
index.js
$.sayHello = function() { // Or you can use `exports.sayHello` too
console.log("Hello");
};
alloy.js
var index = Alloy.createController("index");
index.sayHello(); // Call function defined in index.js
Related
In early javascript project, we have created a file named kresource.js, its code is below
//kresource file, contains some functions
var kresource = (function () {
function kresource () {
}
kresource.getLang = function () {
console.log('en') //it's only a sample...
}
return kresource
})()
When in a html page, we can access the function by kresource.getLang(), but in a Quasar vue page, how can I import this file, and access the function?
//index.vue file
import kresource from '../js/kresource.js'
[Vue warn]: Error in created hook: "TypeError: _js_kresource_js__WEBPACK_IMPORTED_MODULE_0___default.a.getLang is not a function"
It isn't working because you need to use that code as a module instead of relying on var being global.
You need to add an export to your file. At the end of the file you need to put:
export default kresource
And in the file where you plan to use it:
import kresource from 'path to the file'
Notes: You can read more about modules in JS so you can understand better what is hapening, and also instead of var use const, since that variable is never reasigned and it is better to maintain the global scope cleaner.
I have an async js script which is loaded at the top of index.html in my vue project. This script exposes several functions into the window object which I would like to be able to call. I would like to be able to call these functions in the mounted() lifecycle hook, but the async function appears to complete only after mounted has finished. Is there a way I can force the vue instance to wait for all <script> to complete before mounting the root component?
According to this issue in Github https://github.com/vuejs/vue/issues/7209 it seems that the async hooks in Vue lifecycle mounted() created() etc, is only for the ability to call async functions. but the lifecycle itself is synchronous.
Here are some ideas to manage this problem:
You can wrap your component with v-if and render it just as soon as your data is ready.
If you render a component by router - you can use the lifecycle of Vue router. and call your async function before enter to Vue page. do it like this:
export default {
beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
next()
}
}
this next() function calls the first Vue lifecycle hook...
full tutorial: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards
If anyone is interested, here is how I solved my problem:
I modified the js file that the <script> was referencing to set global.initComplete=false initially, and when the script was complete, I marked it as true.
For main.js file, I used:
import Vue from 'vue'
import App from './App.vue'
function init() {
let vm = await new Vue({
render: h => h(App),
})
if(!global.initComplete) {
setTimeout(init, 50)
} else {
vm.$mount('#app')
}
}
init()
i want to not use webpak form my vue devlopement,
so there is 2 alternative
writting components as .js file or
writing them as .vue file and use httpVueLaoder to load component as if they are .js file
with httpvueLoader think go grate untile the time i want to use an API inside my component
ther i can not get the API
i have a Home.vue componet inside ther is a FormLot.vue component in witchi try to import API.js
<script>
let FormLot = window.httpVueLoader('./frontEnd/page/lot/FormLot.vue')
module.exports = {
name:"Home",
components: {FormLot:FormLot},
...
};
</script>
in FormLot.vue
// _END_ is the absolut path to the site , soi can change it later
let API = import(_END_+'/api/api.js') // dont work return promise
import API from './frontEnd/api/api.js' // dont work componnet dont show at all :(
let FormLotE1 = window.httpVueLoader(_END_+'/page/lot/FormLotE1.vue')
module.exports ={
...
};
</script>
API.JS
module.exports ={
...
};
API.JS
export default {
...
};
with API.js i tryed export default and module.export bothe dont work
nota
when using webpack API.js got been normaly imported and work fine
when using import API from path httpVueLaoder dont work
so i tried to do
const API= import(path)
problem witch that ,API is promise ,wich can notbe used :(
using await dontsolve the problem even when using
const API = (async ()=> await import(path))()
my solution still to call import using await but not in the top of the script
i call it in the mounted() function
async mounted(){
API = (await import(_END_+'/api/api.js')).default
},
note that you must use .default because import return a module :)
enter code here
I have setup a vue prototype
Vue.prototype.$preventAccess = function (role ) {
if(role === this.$store.state.role) {
// do some stuff
}
}
this is in my main entry point however when I try to use it in an external module (prevent.js)
import store from '#store/store';
import Vue from 'vue';
export default function log({ next, to }) {
console.log(Vue.prototype.$preventAccess('Editor'));
}
I get the error
Cannot read property 'state' of undefined
Can I not use my prototype in an external JS file like this? How do I inject the store into the external module?
Following the documentation here :
https://v2.vuejs.org/v2/guide/plugins.html
MyPlugin.install = function (Vue, options) {
// 4. add an instance method
Vue.prototype.$preventAccess = function (role) {
// some logic ...
}
}
Vue.use(MyPlugin);
When using prototype you have access to a this when you create an object based on that class.
When accessing Vue.prototype.$preventAccess there is no this, because there is no instance of Vue so there is no this created.
Your call would work if you instantiate Vue and call $preventAccess on that instance.
var app = new Vue({
el: "#app",
})
app.$preventAccess()
Now, $preventAccess has a this defined.
I'm creating a plugin and I just wonder why I can't access it in main.js file. Here's how Auth.js looks like:
const Auth = {
install(Vue) {
Vue.prototype.$isGuest = function () {
console.log('This user is a guest.');
}
Vue.prototype.$getAuthToken = function () {
console.log('Auth token will be returned.');
}
}
}
export default Auth
This is main.js:
import Auth from '#/helper/Auth'
Vue.use(Auth)
However, when I execute console.log(this.$isGuest()), it doesn't work. It actually returns the following:
main.js?1c90:25 Uncaught TypeError: this.$isGuest is not a function
The problem is that this method works when I call it in components such as Dashboard.vue and things like that.
I have a way to avoid calling isGuest method within main.js (I can call it in Layout.vue), but I'm more curious why it doesn't work in main.js.
Maybe because Vue hasn't been initialized yet, but even if I put the console.log() line at the end of the file, still doesn't work.
Thanks,
N.
If you are calling this.$isGuest() outside of Vue, you will get the error you describe. That's because this is not a Vue object. What this is depends on how you are building your code, but given you are using import it's probably the module.
Also, you are adding $isGuest to the prototype of Vue. That means that the function is only going to be available on actual instances of Vue objects. That is why it is available in your components.
If you want to use it in the main script, the only place you will be able to get to it is inside the Vue object in a lifecycle handler, method, or computed. For example:
new Vue({
mounted(){
console.log(this.$isGuest()) // this should work
}
})